Reply To: Adjusting the height of header before it becomes a sticky header

[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

---