This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Menu centering and/or spacing

Open 7 replies premiumthemetheme-vantage
Jesse Becker
11 years ago · Last reply by Andrew Misplon 11 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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Jesse Becker 11 years, 4 months ago

    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. Jesse Becker 11 years, 4 months ago

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

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

    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. Andrew Misplon Staff 11 years, 4 months ago

    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. Jesse Becker 11 years, 4 months ago

    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.

    • Jesse Becker 11 years, 4 months ago

      The PW is ‘unfinished’

  6. Andrew Misplon Staff 11 years, 4 months ago

    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.

Have a different question or issue?

Start New Thread