"Narrow" header

[nowayinteractive]

hello,

I’d like to put the narrow version of the menu (like menu 7) but before the slider like the normal menu, it works fine but the sticky menu gets messed up, when I try on the demo page and delete the slider the menu comes first and the sticky menu works fine.

please advise

---

[Support]

Hello, I think this is what you’re looking for:
http://www.okler.net/forums/topic/how-to-make-the-menu-always-sticky/

(That’s based on the default header style – index.html)

Let me know if you have any questions.

Kind Regards, Jonas

---

[pongohops]

I was looking for this exact same thing tonight and it works, BUT it appears there is some code left out. When the screen in minimized to the point where the menu button is shown instead of the actual menu items… the button, logo, and the overall header height is off. Any chance for some additional css to correct this?

I am basing this modification off the index-header-signin.html page and using the ‘narrow’ header option mentioned in the above answer.

Also, there is a js error when using the custom js modification listed above as well : TypeError: theme.StickyMenu.initialize is not a function

---

[Support]

Hello @pongohops,

Did you try with this css?

div.body {
	padding-top: 70px !important;
}

body.sticky-menu-active #header {
    top: -62px;
}

body.sticky-menu-active #header .logo img {
    display: inline-block;
    height: 40px;
    top: 28px;
    width: 82px;
}

Please open a new ticket and send us the URL so we can check.

Kind Regards,

Jonas

---

[pongohops]

Yes, I tried the solution you mentioned earlier in this post. The css portion is exactly the same as what you just replied with. There are a number of small issues with this solution :

1 – when minimized the menu button, logo, and overall header height are off.
2 – the js error I mentioned in the previous post
3 – the true height of the header is much more than you what you see (the search, social, and nav-top can be removed, but this does not change the height… if you change the gradient of the header this can be seen as the gradient will begin off-screen in a section that will never be displayed.

What I am trying to accomplish is a sticky header which is only the logo and the nav-main.

---

[Support]

Hello, can you please confirm which version are you using? The above suggestion should work on Porto 3.2+. If you could please open a new ticket and send me the URL to check, would be great. 🙂

Kind Regards,

Jonas

---

[Support]

Hello, can you please confirm which version are you using? The above suggestion should work on Porto 3.2+. If you could please open a new ticket and send me the URL to check, would be great. 🙂

Kind Regards,

Jonas

---

[pongohops]

I just purchased the other day so this is the latest version. I also noticed your the drop down menu no longer worked when in collapsed mode – perhaps this had something to do with the js error… not really sure, but there were quite a few problems I noticed. I ended up coming up with my own solution and was going to post it in a new thread. Hopefully you do not mind.

---

[Author]

Posts