Home>Support>Menu centering and/or spacing

Menu centering and/or spacing

By Jesse Becker, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

So I’ve been searching around for Custom CSS to center the menu buttons and change the space between them. As far as I can tell, this is the recommended CSS to center the menu:

.main-navigation ul {
text-align: center;
}

.main-navigation ul li {
display: inline-block;
float: none;
}

.main-navigation ul ul li { 
text-align: left;
}

… and this is the code to increase the space between buttons:

.main-navigation ul li a {
padding-left: #px;
}

However, neither of those inserted into either the custom CSS section or edit CSS have worked for my menu. Is there some other conflict?

URL: http://ayoungdemocrat.com

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

  1. 9 years, 11 months ago Jesse Becker

    Sorry for the addition, but I did have a second question. My logo has a padding of 20px, but there’s still more space above the logo than below. How can I adjust that extra space above the logo?

  2. 9 years, 11 months ago Jesse Becker

    Sorry, I figured out how to remove the page’s padding which fixed my second issue, using:

    #page-wrapper {
  
padding-top: 0px;
}
  3. 9 years, 11 months ago Jesse Becker

    Third edit… I fixed everything! I’m sorry for my confusion. I thought inspecting the style sheet would be too complicated, but apparently not :P

  4. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Glad to hear you made positive progress here.

    Just let us know if you need a hand again.

    Our Custom CSS tutorial here is here: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/ if you need a hand with inspecting source code.

    Please remember that any changes made to theme files via Appearance > Editor will be lost during theme updates.

  5. 9 years, 11 months ago Jesse Becker

    Thanks! I did manage to mess something up, however, that I can’t figure out how to fix. There’s now a space between my menu buttons. If you hover between them, you see the text cursor and you can highlight it separately from the buttons themselves.

    • 9 years, 11 months ago Jesse Becker

      The PW is ‘unfinished’

  6. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Try this:

    Add a font-size property to both the ul selector and the li selector. To the ul selector make the font-size: 0 and the li selector return the font-size to 13px;

    ul:

    font-size: 0;

    li:

    font-size: 13px;

    So the first two selectors will then look like this:

    .main-navigation ul {
font-size: 0;
text-align: center;
}

.main-navigation ul li {
display: inline-block;
float: none;
font-size: 13px;
}

    Ref: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
    Ref: http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items

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