Collapsed header on small screens

[tdyrlund]

How do I change so that on screens with a width under 720px the header is always shown as collapsed (= the size it has once you scroll down on the page)?

Thanks in advance!

---

[Support]

Hello, you need to add a custom css:

(css/custom.css)

@media (max-width: 700px) {
	body #header {
		border-bottom: 1px solid #e9e9e9;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
		margin-top: -57px;
		width: 100%;
	}
	
	body #header .logo img {
		top: 28px !important;
		width: 82px !important;
		margin-top: -10px;
	}
	
	body #header .btn-responsive-nav {
		top: 62px;
	}
}

Kind Regards,

Jonas

---

[tdyrlund]

Now the header has the smaller size but it is not sticky when I start scrolling. How do I make it still stay at the top of the view when I scroll the page?

Thanks.

---

[Support]

Hello, the sticky header was disable on mobile when you added:

$.extend(theme.StickyMenu.defaults, {
	stickyEnableOnMobile: false
});

Unfortunately that’s the only way to see the navigation on mobile with full height (no scrollbars), if the header is fixed you need to set the scrollbars in order to see all the items when the menu is opened. Unfortunately you need to choose one of them. 🙂

Let me know if you have any questions.

Kind Regards, Jonas

---

[Author]

Posts