Adjusting the height of header before it becomes a sticky header

[[email protected]]

I love the theme and have enjoyed building with it. I’m stuck on a question about adjusting the height of the header. I figured out how to adjust the height of the sticky header, but I would like the initial header to be much smaller.

---

[Support]

Hello, thanks for your purchase.

If you are using a sticky header with shrink effect, you can control the initial header height with this code below in (css/custom.css):

#header.header-effect-shrink .header-container,
#header .header-nav {
	min-height: 30px;
}

@media (min-width: 992px) {
	#header .header-nav.header-nav-links nav > ul > li > a, #header .header-nav.header-nav-links nav > ul > li:hover > a, #header .header-nav.header-nav-line nav > ul > li > a, #header .header-nav.header-nav-line nav > ul > li:hover > a {
		min-height: 30px;
	}
}

Maybe will be needed remove the margin top and bottom of header logo (in case you need very small initial height). For it you can add the class my-0 in the header logo:

<div class="header-logo my-0">
	<a href="index.html">
		<img alt="Porto" width="100" height="48" data-sticky-width="82" data-sticky-height="40" src="img/logo.png">
	</a>
</div>

Please try that and let us know 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

---

[[email protected]]

I tried using that but it is causing some wacky behavior. In my local host, as I navigate back and forth from Home to about to services and back to home, sometimes the intitial header is original size, and sometimes it is down to the smaller size. It is being computed by one of the Java Script files I’m sure. Could you identify which file/function is inserting the height style?

---

[Support]

Hello,

Unfortunately we couldn’t reproduce the issue you mentioned at our end (navigate in a new page and back). Can you please send a online test link with your website for us ? So we can inspect your code, do some tests, detect where’s the issue and send the best solution for you.

The JS code for sticky header it’s in the “js/theme.js” file initiating at line 5019 until 5440.

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