Main Menu spacing between menu items

  • TGoedde

    (@tgoedde)


    3 weeks, 2 days ago

    How do I make the spacing between menu items narrower? I want all of the menu items to list horizontally across without some bumping down to a new line. Why isn’t this a simple edit? Is there generic CSS I can drop in?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • aapc

    (@aapc)

    2 weeks, 5 days ago

    Hi @tgoedde

    I’m glad you reached out. Happy to help!

    The theme does not have a setting to adjust the width/spacing of your menu items. But, with a little bit of custom CSS, we can can fix that. To add custom CSS to your site go to Appearance → Theme Options and click on the Advanced Settings section. Here you can insert the following CSS:

    #nav-second ul.sf-menu {
    	float: none !important;
    	display: flex;
    	column-gap: 4em;
    	flex-wrap: wrap;
    	justify-content: center;
    }
    #nav-second ul.sf-menu > li {
      width: auto !important;
    }

    If you’d like to adjust the space between items, simply change the ‘column-gap: 4em’ to your desired setting. Also, if you’d like the menu to be left-justified instead of centered, change ‘justify-content’ to ‘flex-start’ instead of ‘center’.

    I hope that helps! Please let us now if you have any questions or if there is anything else we can do to assist.

    Thanks!
    Anthony

    Thread Starter TGoedde

    (@tgoedde)

    2 weeks, 4 days ago

    Thanks AACP! That worked great!

    Next up is how to make that desktop menu NOT show on mobile devices. I do not have a menu set up option for turning it off via the Menu Settings.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.