Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

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

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

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,830
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/3 test site

Offline

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

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

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,830
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/3 test site

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
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/3 test site

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
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/3 test site

Offline

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

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

Re: Modify Menu Display on Mobile Devices?

Brilliant, thanks Rod.

Those changes made a big difference.

Cheers
Chumby

Offline

Board footer

Powered by FluxBB