Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2020-03-25 13:47:16

chumby
Member
Registered: 2014-10-23
Posts: 149

Modify Menu Display on Mobile Devices?

Hi there,

Is there a way to edit the CSS for the main menu items on a mobile display?

At the moment there are big gaps between each menu item and the content is pushed low down on my mbile device.  Would like to make the gaps smaller here between each menu item.

Cheers,
Chumby

Offline

#2 2020-03-25 14:38:20

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,317
Website

Re: Modify Menu Display on Mobile Devices?

Custom css.
Here is one option: https://ttg-tips-and-tricks.barbeephoto … bile-menu/

If you include a link to your site we can get a better idea of what you’re describing. My guess, without seeing the issue, is that you might need to adjust line height to get things closer.

Last edited by rod barbee (2020-03-25 14:40:36)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2020-03-25 16:22:08

chumby
Member
Registered: 2014-10-23
Posts: 149

Re: Modify Menu Display on Mobile Devices?

Thanks Rod,

My site is at https://www.tasmanianphotos.com

I'll check out that tips and tricks.  Thank you for putting it together.

Cheers
Chumby

Offline

#4 2020-03-25 22:20:58

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,317
Website

Re: Modify Menu Display on Mobile Devices?

You might not need custom css.
I’ll take a look when I get to my pc, but first check any top and bottom padding settings in the Navigation > Vertical Navigation settings of the Page Template.

Last edited by rod barbee (2020-03-25 22:22:38)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#5 2020-03-25 23:47:01

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,317
Website

Re: Modify Menu Display on Mobile Devices?

just took a look. You've got 24px of top and bottom padding on those menu items.

Go to the page template: Navigation > Vertical Navigation: Padding. it's the last item under Vertical Navigation.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#6 2020-03-25 23:56:33

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,317
Website

Re: Modify Menu Display on Mobile Devices?

And to add some space to the left of the mobile menu items, go to Layout in the page template. Change the setting for Pallet(s) Gutters


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#7 2020-03-26 07:11:18

chumby
Member
Registered: 2014-10-23
Posts: 149

Re: Modify Menu Display on Mobile Devices?

Brilliant, thanks Rod.

Those changes made a big difference.

Cheers
Chumby

Offline

Board footer

Powered by FluxBB