[Support request] sticky header with margin

[dasigna]

hi there,

so i am building up a new page wich has padding all around (container-wrapper). now theres a complaint on the clients side that the demanded sticky headers doesnt have that space all around and taking full width straight on top regardless what …

so theres the question:
is it possible to have sticky headers with margin all around including top???

already tried this and basically it seems possible, but struggeling on two things… first – given top margin is not respected at all. second – side margins pushes the sticky to the right outside of the viewport; some “width: 100% !important;” rule cant be overwritten, at least not by me (and probably intended…).
i fear those two are related and refer to absolute positioning, as without the header wouldnt be sticky.

pro-coder opinion highly appreciated.
thanks in advance.

[David]

Hi there

would you be able to provide a link to the site? If so you can edit your original topic and use the Site URL field.

[dasigna]

hi david,

… currently under development so not publicly viewable.
but i can create an account and give you credentials via contact form.

would that help?

[David]

Yes, it would help, so i can see what were dealing with
You can send it via the account issue form here, please add the URL of this topic to the form:

https://generatepress.com/contact/

[dasigna]

credentials are on their way.

[David]

So, the side margins looks ok when scrolling (?).
You can try this to add some margin to the top of the sticky nav:

.sticky-enabled .main-navigation.is_stuck {
    margin-top: 50px !important;
}

The only problem is there may be a slight ‘jump’ when scrolling up and the sticky returns to static.

[dasigna]

thanks david.

… hmmm have to think about the jump. must see again later.

what about the left/right margins -> mainly important on tablet and mobile view…
have you been able to replicate this?

[David]

The jump issue may not be as apparent if the sticky is always on.
For the mobile header you could try something like this:

#mobile-header.main-navigation {
    width: calc(100% - 40px) !important;
    left: 20px;
}

[dasigna]

ok. were getting closer, but up a step from perfect 🙂
thanks for the help so far, seems to be the right direction.

had to extend the mobile part a bit so it doesnt affect the (mobile) main-navigation:

.sticky-enabled .main-navigation.is_stuck {
    margin-top: 20px !important;
}
#mobile-header.main-navigation.is_stuck {
    width: calc(100% - 40px) !important;
    left: 20px;
}

so the top margin is there, but there are two issues insisting:
– for both desktop and mobile the sticky nav shows the 20px when it shouldnt (having activated hiding when scrolling down)
on desktop the sticky nav still exceeds the width on both sides by 20px whereas the main navigation has the given width.

now that you pointed me into the right direction i feel its possible to do the rest as well, but i fear i am unable to find the correct selectors …

any idea?

[David]

So you can use the same .sticky-enabled .main-navigation.is_stuck class = problem being its gonna be difficult keeping it responsive due to the fixed container size.

Ie. this won’t work:

width: calc(100% - 40px) !important;

This would:

width: 1160px !important;

But once the screen hits 1160px the gap will disappear

[dasigna]

… yeah. already experienced, the calc-value wont work.
and still the rest is hard, i know – stumbling over this nasty .navigation-stick:not(.gen-sidebar-nav) class over and over again 😉

at least it works with max-width: 1160px; for a while … not perfectly all the way till the mobile nav drops in, but mainly on desktop. will see how it will do (last word is up to client…).

BUT:
how do i get over the still existing issue with the 20px of sticky showing when scrolling down???
any idea

[Tom]

Unfortunately, there’s not much we can do about that as the JS is calculated within the plugin and can’t be altered without changing the core files.

The plugin gets the height of the sticky element and uses that to determine how far to move the navigation out of sight.

One potential workaround would be to make the sticky navigation taller and then remove the background color from the main element. Then maybe adding top margin to the .inside-navigation element? Not sure if this will work – just the first thing to come to mind.

[dasigna]

hi tom,

Unfortunately, there’s not much we can do about that as the JS is calculated within the plugin and can’t be altered without changing the core files.

… i already feared that 🙂

fiddled around a lot again last night, and yes, encoutered the calculating via js. still hoped there would be a separate css class for hidden sticky. but as there is only one, every attempt to hide the margin only whilst stick is doomed to failure… obviously.

tweaking with transparent sticky sadly is no option too, due to design reasons as well as top and bottom borders. but i dont think it would work as expected anyway.
so at the end theres two variants:
– living with the barely visible sticky, or
– dismiss the top margin for sticky completely
i personally tend to the second. the navigation things are always a hard nut to crack if one linkes to tweak around with it – like me 😉

anyway: again learned a lot and now can communicate the issue better to the client.
thanks for your help again. great support as always – really appreciate that!

best wishes.

[Tom]

I agree that a class needs to be present when the navigation isn’t visible. When I re-write the sticky navigation in vanilla JS, I’ll be sure to include a new class for this.

Sorry I couldn’t be more helpful!

[Author]

Posts