Menu padding between top and bottom hr

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.

@andrew, you could perhaps use your own stylesheet, which defines modified classes and load it after the main stylesheet on the header. After updates, all you’d have to do is re-insert the link on your header.php and you’re done (assuming class names won’t change)

@wpyogi, they get deleted?

@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.

https://codex.www.ads-software.com/Child_Themes

Here’s the site in question:
https://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.