[Resolved] How can i create a fixed Header and top Menu in the Generate Press Theme

[Tom]

Awesome 🙂

[nipe]

Sorry to bother you again.

I just noticed the sticky header/menu code a few posts back means it will always be sticky on both desktop and mobile. Is there a simple way to make the code apply only on desktop?

[Tom]

Any chance you can link me to your site so i can take a look at whats happening?

Let me know. 🙂

[nipe]

It’s on a local webserver so far. But I figured it out, it wasn’t that hard once I cleared my mind. 🙂
I just put the sticky code within @media (min-width: 769px) {...} and it won’t be sticky on small screens.

[Tom]

Awesome! Glad you figured it out 🙂

[nipe]

Hmmm, Tom what have you done?! 😀

Something weird happened with the 1.2.79 update, or perhaps it was the WordPress 4.4.2 update. Can you please take a look at brfviolen.nu/test/ and tell me why it’s now behaving the way it is?

Before the update the 3 menu items at the top where vertically aligned to the middle of the grey header. And didn’t jump to the left covering the Site Title once you start scrolling.

The code used for fixed header and top menu is the one mentioned in our conversation above.

• This reply was modified 8 years, 2 months ago by nipe.

[Tom]

Hi there,

Any reason why you’re not using the Menu Plus add-on for this functionality? It might work a lot better.

Let me know 🙂

[nipe]

I don’t understand, I do use Menu Plus and everything worked fine before the updates.
I’m very new to this so I would appreciate it a lot if you can point me in the right direction if there’s something I could do in a better way.

I want the title to the left, the menu to the right, both vertically aligned to the middle of the grey background and fixed when scrolling.

[Tom]

If using Menu Plus, this topic shouldn’t really apply. You can upload your logo as the menu logo and set everything up in the Menu Plus area.

This topic is for making the entire header sticky, which I don’t think is necessary with the menu logo option.

That being said, I’m on an iPad in a hospital with my newborn baby, so I might be missing something. Are you using the menu logo option, or the code provided in this topic?

[nipe]

Congratulations! I hope everything is fine. You should focus on your family for a while and not answering questions here, but I’m glad you do answer them. 🙂

I was making the entire header sticky with the code in this topic. Since the site title is plain text I didn’t think of making it an image and apply it as a menu logo. I’ll give that a try later today.

But if I recall correctly the menu logo will be placed right next to the menu items. I guess it should be possible to separate them, logo to the left and menu items to the right, but I’m not that good with CSS. I’ll try some myself but again any tips is appreciated.

[nipe]

Tom you were right (of course). Adding the title as a menu logo and relying on menu plus made everything a lot easier. No hooks and stuff needed, just some padding-top to get the menu items lined up correctly. Thanks a lot!

[Tom]

You’re very welcome! I’m glad I was able to help 🙂

It would be cool to be able to add text in place of the menu logo, I’ll look into that.

[Chris]

Hi Tom,

Using your custom-fixed-header I successful made my header and menu sticky. Yay!
However, when the site is in the responsive mobile view, the padding is moving everything down too far. Boo!
Any advice for me?

The site is http://psifulfillment.global

Thanks,
Chris

[Tom]

You can adjust the container padding on mobile like this:

@media (max-width: 768px) {
    .container {
        padding-top: 40px;
    }
}

[Rui]

As of today, can you confirm there isn’t an option (via backoffice/customize menu) to put the header fixed on top of the content area?

it’d be great in order to user powerpack’s dot navigation while keeping the menu, for example.

thanks!

[Author]

Posts