- This topic has 10 replies, 4 voices, and was last updated 4 months, 3 weeks ago by
Elvin.
-
AuthorPosts
-
October 2, 2020 at 2:12 pm #1469779
Jana
I’d like indent each sub-items in my menu. And separately, is there a way to add a hairline between the items? Thanks, Jana
October 2, 2020 at 4:04 pm #1469832Jana
And also would like to learn how to make the distance between all the menu items much smaller (they’re very spread out) in the phone and mobile versions. Thanks!
October 2, 2020 at 8:26 pm #1469932Leo
StaffCustomer SupportHi there,
Try this CSS:
.main-navigation .main-nav ul ul li a { padding-left: 25px; } .main-navigation .main-nav ul ul li:not(:last-child) a { border-bottom: 1px solid #fff; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
And also would like to learn how to make the distance between all the menu items much smaller (they’re very spread out) in the phone and mobile versions.
Are you referring to horizontal or vertical spacing here?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 3, 2020 at 3:15 pm #1470976Jana
The top css was great for adding lines but it didn’t make the sub item only indent – it made all the items indented – I’d like only the sub-menu items (the only under the main items) to be indented.
And I mean the vertical spacing – the menu items are all so far apart in the mobile and tablet versions that they go below the page.
Thanks, Jana
October 3, 2020 at 7:55 pm #1471088Leo
StaffCustomer SupportThat CSS should definitely only make the sub menu indent.
The CSS is currently missing the px number. Can you add it in first?
https://www.screencast.com/t/z2M09pV7ChWIAs for vertical spacing, have you tried reducing the menu item height with the mobile toggle activated?
https://docs.generatepress.com/article/menu-item-height-width/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 4, 2020 at 8:46 am #1471776Jana
I removed the numbers because it was indenting both the pulldown main primary items and the sub-items (secondary) – and I only want the secondary items indented.
And far as using the ‘Menu item height’ for making the vertical height of the primary pulldown menu items – it makes the whole main menu background smaller in the top bar (which I don’t want). I just want the vertical height of the primary pulldown menu items on mobile and tablet versions to be closer together (have less height). The height of the secondary menu items is fine.
Thanks for helping me work this out!
October 4, 2020 at 2:41 pm #1472132Tom
Lead DeveloperLead DeveloperHi there,
Try this for the height:
.main-navigation.toggled .main-nav ul li a { line-height: 40px; }
The sub-menu indent looks good right now, did you get that sorted?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 4, 2020 at 7:04 pm #1472268Jana
Great! That worked to tighten up the menus vertically. How do I get the 3rd sub item to indent from the 2nd sub item – then I’ll be all set! Thanks, Jana
October 4, 2020 at 7:18 pm #1472276Elvin
StaffCustomer SupportYou can try adding this code for the sub-items of the sub-items. 😀
.main-navigation .main-nav ul ul ul li a { padding-left: 40px; }
A wise man once said:
"Have you cleared your cache?"October 5, 2020 at 7:50 am #1473205Jana
Thank you – that all worked great!
October 5, 2020 at 2:44 pm #1473739Elvin
StaffCustomer SupportAwesome. No problem.:)
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.