Mobile Sub Menu

Homepage Community Forums Aspire Theme Support Mobile Sub Menu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #21973

      Hello! 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 needs padding on either side.

      Can you please advise where this CSS is?

      Thank you! Erin


        Try 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.


          That 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.

          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!


            Yeah 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 to 20px 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.

          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.