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.

Getting menu items to fit on one line.

Open 13 replies premiumthemetheme-vantage
bmardiney
11 years ago · Last reply by Andrew Misplon 11 years ago

I’m trying to get my menu items to fit on one line together, but unless I switch to a very compact (and thus, not preferable) font, I can’t seem to find an easy way to do that. I know you can change the vertical padding in the “customize” section, but I don’t see a way to mess with the horizontal padding (or any options relating to how menu boxes/text is displayed or margined). Thanks in advance for any help!

URL: http://www.realityguidance.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

13
  1. Andrew Misplon Staff 11 years, 3 months ago

    Hi bmardiney

    Please see: https://siteorigin.com/thread/adjust-space-between-menu-items/.

    Hope that helps.

  2. bmardiney 11 years, 3 months ago

    That’ll do it. Thanks so much!

  3. bmardiney 11 years, 3 months ago

    I spoke too soon. That did help with getting the menu padding down, but I seem to have screwed up my banner now. Before I messed with the custom CSS, the banner fit snuggly in the masthead section. Now, it’s got a whole bunch of padding around it. When I go into the theme settings, I can get rid of all but 1 pixel of padding from the top and bottom, but I can’t get rid of the left and right. Here is everything in my custom CSS section:

    /* Full header logo */
header#masthead {
padding: 0 !important;
}
header#masthead hgroup {
padding: 0 !important;
}
header#masthead hgroup .logo img {
width: 1080px;
}
.main-navigation {
margin: 0 !important;
}
body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar {
display: none !important;
}
/* Menu Padding Horizontal */
.main-navigation ul li a {
padding-right: 21px !important;
padding-left: 21px !important;
}
  4. Andrew Misplon Staff 11 years, 3 months ago

    All of the above hgroup elements now need a period in front of them.

    Before:

    hgroup

    After:

    .hgroup

    Hope tha thelps.

  5. bmardiney 11 years, 3 months ago

    That got rid of the top and bottom padding completely, but as you can see, the left and right padding remains: http://www.realityguidance.com. I tried using differently-cropped banners, thinking it might just be a size problem but no luck. It seems like before, the image was simply auto-fit to the box. Now, not so much.

  6. Andrew Misplon Staff 11 years, 3 months ago

    The image you’ve uploaded as your logo is 1010px wide. It should be 1080px wide.

    Not sure why things would have changed from the previous situation but I did write the CSS for this with a 1080px wide image in mind.

    Hope that helps.

  7. bmardiney 11 years, 3 months ago

    Okay I changed it back to 1080 x 240. Same situation.

    Sorry to be so much trouble, and thanks for continuing to work with me :)

  8. bmardiney 11 years, 3 months ago

    I don’t know if this helps narrow the problem down, but when I go into the “customize” section>General…if I uncheck “Center Logo”, it shifts the image up against the left hand side, thus creating double the padding on the right hand side. So the coding “knows” that there’s empty space on both sides, regardless of the pixel size of the picture.

  9. Andrew Misplon Staff 11 years, 3 months ago

    Do you have the CSS you initially pasted under Appearance > Custom CSS? Please check that it’s still there. Thanks.

  10. bmardiney 11 years, 3 months ago

    This is what I currently have in the Appearances>Custom CSS section:

    /* Full header logo */
header#masthead {
padding: 0 !important;
}
header#masthead .hgroup {
padding: 0 !important;
}
.main-navigation {
margin: 0 !important;
}
body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar {
display: none !important;
}
/* Menu Padding Horizontal */
.main-navigation ul li a {
padding-right: 21px !important;
padding-left: 21px !important;
}

    Now, there are two custom CSS sections. The one this is in is titled “Simple Custom CSS”. The other Custom CSS is just a blank box (no numbers along the left hand side. Should this coding go into that other section?

  11. Andrew Misplon Staff 11 years, 3 months ago

    Simple Custom CSS is fine. I think it gets compressed so it’s harder for me to read in your source code but that’s no problem. It looks like you’re missing the crucial img selector. This is how the full list of CSS for this should look.

    /* Full header logo */
header#masthead {
padding: 0 !important;
}
header#masthead .hgroup {
padding: 0 !important;
}
header#masthead .hgroup .logo img {
width: 1080px;
}
.main-navigation {
margin: 0 !important;
}
body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar {
display: none !important;
}
  12. bmardiney 11 years, 3 months ago

    Ah, there we go! Thanks so much!

  13. Andrew Misplon Staff 11 years, 3 months ago

    Super, glad to hear that helped.

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