Home › Community Forums › Aspire Theme Support › Mobile Sub Menu
- This topic has 3 replies, 2 voices, and was last updated 5 years, 8 months ago by
Wes.
-
AuthorPosts
-
September 27, 2017 at 12:44 pm #21973
erinok
CustomerHello! My site needs a little help in the padding around the sub-menu items on mobile. Not first level, but second level.
If you view this on a phone or make the browser small, you will see that this page’s sub-menu
https://www.womensleadershipconference.net/conference/ needs padding on either side.Can you please advise where this CSS is?
Thank you! Erin
September 27, 2017 at 4:04 pm #21974Wes
ModeratorTry adding this to your custom CSS –
.site-header .genesis-nav-menu.responsive-menu .sub-menu li a { background-color: #000; padding: 10px 20px; width: 190px; }
I added the background color of the Sub Menu as black. You can switch it or remove it if you don’t want/need one by changing it to match the default background color.
Let me know if that helps.
September 27, 2017 at 4:17 pm #21975erinok
CustomerThat helped so much! However, is it possible that it tightened up the spacing of the main drop down? When I look at it now it looks more bunched together.
https://www.womensleadershipconference.net/conference/
Is there a way to add more padding top and bottom to separate each item, plus maybe some line-spacing so the 2-liners aren’t so close together?
Thank you again for all your help!
September 29, 2017 at 12:26 am #21978Wes
ModeratorYeah we can adjust that. If you edit the Custom Code you have around line 3296 and increase the padding it should work –
.genesis-nav-menu.responsive-menu li a, .genesis-nav-menu.responsive-menu li a:hover { background: none; border: none; display: block; padding: 20px 0; text-transform: none; }
I changed it from
10px
to20px
in this example. You can adjust more if you need.While viewing this, I just noticed something I need to fix in the theme. While in Responsive mode, this code adds more space under each main menu item when scrolling down –
.genesis-nav-menu a, .site-header.light .genesis-nav-menu a { padding: 10px 10px 20px; }
It’s located around 2600 in the Default Theme, but since you have a custom CSS it’s located on line 2604 in your file. You can comment out or remove that code if you need. I’ll be removing it from the Theme by default in the next update.
Let me know if that helps.
I’ll also be making the Sub menus look a little bit better in the next update as well.
-
AuthorPosts
- You must be logged in to reply to this topic.