Home>Support>Menu bar padding

Menu bar padding

By Steve, 8 years ago. Last reply by Steve, 8 years ago.

Hi,
I’ve got the Logo in Menu selection checked and now I want to center the Menu horizontally so that it is even with the middle of the logo. Logo is aligned left and menu is aligned right. There are numerous refs to top and bottom padding at Appearance:Customize:Menu:Menu Item Padding but that option isn’t in my version of Vantage. I did find Appearance:Customize:Theme Design:Menu:Menu Item Padding but that just makes my menu bar bigger and forces the logo down along with the menu items but keeping the menu items aligned with the top of the logo. Thanks for the help.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 8 months ago SiteOrigin
    Hi, I Work Here

    Hi Steve

    Thanks for your question. Recent changes to made to the Logo in Menu masthead layout have complicated things a little. We can resolve by adding the following to Appearance > Custom CSS:

    /* Logo Padding */
    
    #masthead.masthead-logo-in-menu .logo {
        padding: 10px 0;
    }
    
    /* Drop Down Menu Padding */
    
    .main-navigation ul ul a {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    The two rules above will give you padding control over the logo and drop down menu items. You can now use AppearanceCustomizeTheme DesignMenuMenu Padding to control the main menu padding.

  2. 8 years, 8 months ago Steve

    Hi,
    Thanks for the quick response. Menu Padding did not appear as an option. I did save the CSS changes. Something else to try?

  3. 8 years, 8 months ago SiteOrigin
    Hi, I Work Here

    Could you, perhaps take another look at AppearanceCustomizeTheme DesignMenu? Did you scroll down?

    menu-settings

  4. 8 years, 8 months ago Steve

    Hi,
    Thanks for the graphic. That option has always been there and I was expecting Menu Padding not Menu Item Padding. Changing this number increases the size of the menu bar but doesn’t move it down. I did try to scroll past Header Menu Widget Bar and there wasn’t anything. Should there be two more options based on the Custom CSS changes I entered from above? Sorry to make it such a pain and apologize if I’ve missed something simple.

  5. 8 years, 8 months ago SiteOrigin
    Hi, I Work Here

    Apologies for sending the incorrect setting name.

    Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

  6. 8 years, 8 months ago Steve

    Site isn’t live yet and lives on my MacBook. Don’t know if you need me to export something and send to you. I did do some poking around in the Visual editor mode and found the CSS code to move just the menu bar down:

    /* Menu padding */
    .main-navigation ul {
    padding-top: 37px;
    }

    I verified that I was correct using the Visual editor mode. It isn’t the top of the hierarchy so I would want to know if I should replace .main-navigation ul with #menu-main.menu to be programmatically correct.

    The other code doesn’t seem to matter at this point but I wanted to make sure before I remove it. The final question is whether or not I should see that option under Appearance:Customize:Theme Design:Menu. Right now it doesn’t appear similar to the other comments above.

  7. 8 years, 8 months ago SiteOrigin
    Hi, I Work Here

    There isn’t any easy way for us to view the site if you’re working locally.

    Please, remove the CSS rule you’ve just mentioned above. Use the two rules we sent in conjunction with the Customizer padding setting. The first rule sets logo padding, the second rule ensures that drop down menu items maintain normal padding, finally, the Customizer menu padding setting will let you center the menu items in the menu bar.

    We can also come back to this challenge once your site is online. For all of these types of questions, we inspect the site and source code, that makes it really easy for us to see what’s going on and advise. It’s much more challenging working blind like we are now. We can do it, but it can be hit and miss.

  8. 8 years, 8 months ago Steve

    I will reach out once the site gets to a state where you can access it. Should I use the same thread to let you know?

  9. 8 years, 8 months ago SiteOrigin
    Hi, I Work Here

    Definitely. Let us know here once the site is live and we’ll help resolve. Thanks :)

  10. 8 years, 7 months ago Steve

    Hi – I finally got the dev site up. Let me know when you are ready to work on it. I’ll do a private reply with access u/n and pwd. Thanks.

  11. 8 years, 7 months ago SiteOrigin
    Hi, I Work Here

    Hi Steve

    Apologies for the delay. Please, send the details using the Private Reply checkbox. Appreciate it.

  12. 8 years, 7 months ago Steve

    Hi – sorry for asking this question as I’m sure you are busy. Any progress on my issue? Credentials were sent a few days ago. Let me know if you didn’t get them. Also, if it will take longer I would prefer not to leave the u/a, etc active for an extended period of time. Thanks.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More