Menu padding between top and bottom hr
-
Hello . . . Does anyone know how to reduce the gap (padding) between the Menu choices and the top / bottom borders of the .main-navigation? I’ve set the margins and padding to zero, with no affect. Tried the ul and li too. Can’t get it to work. Any response is greatly appreciated.
Thank you
-
You need to change the line-height attribute on the anchor tags.
The default code should look something like:
.main-navigation li a { border-bottom: 0; color: #6a6a6a; line-height: 3.69; text-transform: uppercase; white-space: nowrap; }
It should be on line 1492. Just change the line-height to your liking. Hope it helps!
EDIT: I’m sorry, just noticed you were also asking for the gap between each link. That can be changed using the li:
.main-navigation li { margin: 0 40px 0 0; margin: 0 2.857142857rem 0 0; position: relative; }
Just change the 2.857142857rem to anything you want.
@gezim, I changed it that way before and when the theme updated I lost all my changes. Do you know another way?
EDIT – cross-posted with Andrew :)!
@gezim Basha – what happens to that change when WP is updated?
@justinline – please post a link to your site for help with CSS questions.
@wpyogi, they get deleted?
Yes, which is why it’s not a good idea to modify theme files – changes should be made in a child theme or using a custom CSS plugin.
Here’s the site in question:
http://sonoranlandesign.com/site/Thank you for your responses!
@gezim Basha thank you, but it’s not working for me. I am looking to reduce the space between the top and bottom borders and the menu text. No padding or margin edits are changing it. Line height changes aren’t working either.
Thanks again
I got it. The child CSS wasn’t affecting the spacing I was looking for. When I changed it in the parent theme CSS, it worked. Thank you.
@justinline, that CSS Gezim recommended won’t work in a Child Theme style.css because the way Child Theme styles work is they override the parent theme.
As Gezim just removed the line height:
.main-navigation li { margin: 0 40px 0 0; margin: 0 2.857142857rem 0 0; position: relative; }
The style was not overriding anything.
To override the parent theme’s line-height you need to set your own, e.g:
.main-navigation li { line-height: 0; }
@justinline You should use the Child Theme. Take a look at your code again, it should override.
@andrew Nevins I haven’t changed anything. The code I posted is taken straight from the theme. The line-height has to be overriden for the hyperlinks.
.main-navigation li a { line-height: x; }
Where x is the amount of line-height he wants. I specified that 3.69 is the default.
@gezim, it looked like you advised to remove the line height in your second code example, sorry.
That is what @justinline did by the way, @justinline just removed the
line-height
style from the parent theme’s stylesheet. You can see when you inspect the code on the site.
- The topic ‘Menu padding between top and bottom hr’ is closed to new replies.