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!
Getting menu items to fit on one line.
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi bmardiney
Please see: https://siteorigin.com/thread/adjust-space-between-menu-items/.
Hope that helps.
That’ll do it. Thanks so much!
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; }All of the above hgroup elements now need a period in front of them.
Before:
After:
Hope tha thelps.
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.
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.
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 :)
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.
Do you have the CSS you initially pasted under Appearance > Custom CSS? Please check that it’s still there. Thanks.
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?
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; }Ah, there we go! Thanks so much!
Super, glad to hear that helped.