• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Mobile Sub Menu

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.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 27, 2017 at 12:44 pm #21973
    erinok
    Customer

    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
    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 #21974
    Wes
    Moderator

    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.

    September 27, 2017 at 4:17 pm #21975
    erinok
    Customer

    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.

    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 #21978
    Wes
    Moderator

    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.

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

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework