Padding Issues on Navigation Elements

[jennhelmond]

Hi. I am hoping to reduce the space above and below the links in the navigation bar, but can’t seem to find the right combination of CSS to change to achieve it! I want to reduce the padding above and below to about 12px, and then have the height of the header bar adjust accordingly. If you could point me towards the right lines of code to change, it would be really appreciated.

---

[Support]

Hello, first thanks for your purchase.

At really the current spacing is equivalent to 12px. If you want to reduce the height of navigation items, here’s the code you need:

Add in (css/custom.css):

@media(min-width: 992px) {
	#header .header-nav-bar .header-nav {
		min-height: 0 !important;
	}
	#header .header-nav.header-nav-spaced nav > ul > li > a {
		height: 40px !important;
		min-height: 0 !important;
	}
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[jennhelmond]

That worked great for the navigation elements – they are now shallower. However, the header bar itself is still the same height! I have uploaded the revised style sheet and page to the same location, for you to see.

Thanks in advance!

---

[jennhelmond]

It almost looks like it is drawing the height from the javascript to enable the sticky header, because in the coding of the active page, it has a height defined right after the call for enabling sticky header, and that style isn’t present on my HTML file.

---

[Support]

This reply has been marked as private.

[jennhelmond]

I figured it out. For some reason when I removed the !important tag from the height property of this code, it allowed the navigation bar to resize to the height of the elements:

@media (min-width: 992px) {
#header .header-nav-main {
display: flex !important;
height: auto !important;
}

Thanks again!

---

[Support]

Hello,

Great!

If you need further assistance, feel free to contact us.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts