Sticky Header ?

[David]

Hi All,

I’m converting a site over to GP/GB and the old site used UberMenu.
We are staying with that plugin and have upgraded it to the latest version.
That menu plugin has it’s own sticky add-on which works great, but it only makes the menu sticky & is not full width.
Where on the current live site, the header is sticky and full width:
https://www.triumph.com.au/

I’ve linked the temporary domain we are working on below.
I have turned off the UberMenu sticky feature for now.
So wondering how we can achieve that ?
TIA, Dave

[Leo]

Hi there,

Can you turn the sticky option on so we can see the issue?

This might be something you will need to check with the plugin support but we can check to make sure 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Thanks Leo,
The sticky menu within the customizer was on, so I assume you mean the UberMenu sticky, that is on now!
I’ll also post a support ticket with UberMenu.

I did notice within the UberMenu settings for sticky, there is an option:
‘Expand the menu bar to the full width of the viewport when in sticky mode’ which was always on?

Dave

[Leo]

From what I can see, the entire menu system is all coming from Uber menu so there isn’t anything we can do from GP.

Were you able to get an answer from them?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Thanks Leo,
I have a list of questions for UberMenu, will be sending that through shortly – I’ll keep you updated.
Best regards, Dave

[Leo]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Hi Leo & team,
Just coming back to this.
UberMenu support got back.
>>>>>>
So the UberMenu Sticky Extension is UberMenu-specific; it’ll only make UberMenu sticky (which is why it’s called a “Sticky Menu” and not a “Sticky Header”). The theme’s header could use any markup or have any style applied, so the Sticky Extension can’t control that unfortunately.

Normally the theme would have a sticky header option (though like you said it hasn’t been updated), but alternatively you could either just make it a fixed header (set the position to fixed and add padding to the body via CSS) or look for a generic sticky header solution.
<<<<<<

So I have turned off the UberMenu sticky option, and turned on the GP sticky menu.
Can you take a peek now and let me know if there is any reason why it does not work ?
TIA Dave

[Elvin]

Can you take a peek now and let me know if there is any reason why it does not work ?

GP Premium’s menu plus sticky option applies to the <nav> used by the theme/plugin. It can’t control the <nav> menu created with ubermenu because it doesn’t have the classes and attributes GP uses to apply its script.

But we can try this:

Go to Appearance > Customize > Layout > Header and check “Use Navigation as Header”.

You can then go to Appearance > Customize > Layout > Sticky Navigation and set it to On.

Now test if the header menu is sticky. We’re basically trying to wrap all header contents into 1 <nav> that uses the the proper selectors for the GP script.

Note: You may have to activate Menu Plus on WP Admin Panel > Appearance > GeneratePress if the options mentioned isn’t visible.

Let us know if it works for you.

[David]

Thanks Elvin,
Appreciate the feedback.
I made the changes, but no sticky yet!

Also the UberMenu has moved aligned right & no bottom padding ?
That maybe their settings need adjusting now.

Any other thoughts ?

TIA, Dave

[David]

Hi there,

so like UberMenu – its sticky only works with its navigation. The same goes for the Themes sticky Nav.

If you want to disable GP sticky and re-enable the UberMenu sticky – i can take a look at why its not filling the space.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Thanks David,

So the Uber sticky is back on, and the GP sticky settings turned off along with Use Navigation as a header turned off!

Dave

[David]

Try adding this CSS:

.ubermenu-sticky .ubermenu-main .ubermenu-nav {
    max-width: 100%;
    display: flex;
}

.ubermenu-sticky .ubermenu .ubermenu-item.ubermenu-item-level-0 {
    flex: 1;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Thanks David,
That is better…
The only thing now is the sub-menu’s drop down full width (that might be something I can look at in the UberMenu settings.
And I need to logo in there too.
Late here, I’ll revisit in the morning…
Regards, Dave

[David]

Hmmm not sure how we’ll add a Logo in there as its all UberMenus markup – might be worth asking them.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts