Stickynav behaviour

gntodd1

Link to site in Site url field. Getting an odd behaviour on the sticky menu. This is the JB Buildr template. Sticky nav works as intended on desktop, where it starts off transparent and switches to white background after scrolling. However on mobile and tablet the #toolbar section is white all the time, even though it's set to be transparent in the template settings. It seems that whatever triggers the sticky nav styling to kick in is switched on all the time on mobile and tablet. Any suggestions welcome. Thank you.

teitbite

gntodd1 Hi.

Please try add this to css:

@media screen and (min-width: 787px)
#toolbar.zen-row-wrap {
    background-color: transparent !important;
		-webkit-transition: all .2s ease-in;
		-moz-transition: all .2s ease-in;
		-ms-transition: all .2s ease-in;
		-o-transition: all .2s ease-in;
		transition: all .2s ease-in;
}

.fixed #toolbar.zen-row-wrap {
    background-color: #fff !important;
}
}

gntodd1

Hi, thanks for your suggestion. I've added this CSS but I'm not seeing any change - it is taking effect to make the toolbar background white, but not having any effect on making it transparent before scrolling.

gntodd1

It's almost as though the trigger for indicating that the toolbar is at the top of the screen and hasn't scrolled isn't working. If I pull down on the screen on a phone the toolbar becomes transparent and only turns white again at the very last moment when it reaches the top again. I've also noticed when testing in Chrome dev tools with device set to phone that if I switch from responsive desktop view to phone view with the site freshly loaded (no scrolling) then the toolbar is transparent on phone view as expected, but the moment I scroll it goes white and stays white even when I scroll back to the top.

saguaros

gntodd1
Kindly share the admin + FTP account so we can have a closer look: https://cl.ly/3y3R0p24250G

gntodd1

Added now, thank you. saguaros

gntodd1

saguaros Any update on this please? I have added the login details as requested but have not heard anything further. Thanks in advance.

gntodd1

Any update on this one please?

teitbite

gntodd1 delinea Hi. Sorry, this thread passed my attention.

I can see my style is not working at all. The class name is completly different than the one I used, was something moved/changed or was that me being blind ?

Replace it with:

@media screen and (min-width: 787px)
#logowrap.zen-row-wrap {
    background-color: transparent !important;
		-webkit-transition: all .2s ease-in;
		-moz-transition: all .2s ease-in;
		-ms-transition: all .2s ease-in;
		-o-transition: all .2s ease-in;
		transition: all .2s ease-in;
}

.fixed #logowrap.zen-row-wrap {
    background-color: #fff !important;
}
}

gntodd1

This doesn't work either, but if I'm reading it right that code will take effect at screens wider than 787px? In which case it won't apply to phone screens. I've modified the code slightly to (I think) properly target the screens which have the issue (under 787px wide) but it still doesn't work. See attached screenshot from Chrome Dev tools, the phone screen is correctly triggering that bit of CSS, but it's picking up the part that makes it white. The part that makes it transparent isn't being triggered because the section has the .fixed class, but I can't see how it can be made to only have .fixed when it's been scrolled. I hope that makes sense!

gntodd1

gntodd1 Here's the full code I've put in, there was a missing bracket after the media query part which I've added back in, and adjusted the screen and width targeting:

@media only screen and (max-device-width: 787px) {
#toolbar.zen-row-wrap {
    background-color: transparent !important;
		-webkit-transition: all .2s ease-in;
		-moz-transition: all .2s ease-in;
		-ms-transition: all .2s ease-in;
		-o-transition: all .2s ease-in;
		transition: all .2s ease-in;
}

.fixed #toolbar.zen-row-wrap {
    background-color: #fff !important;
}
}

teitbite

gntodd1 Hi. Yes, that's correct. Unfortunately writing by hand is ofter a victim of typos.

I can see now that I meant to use:

@media screen and (max-width: 787px) {

max instead of min and ate the bracket 🙁 Sorry for that. Happy You were able to figure that out. Can we close this thread now?

gntodd1

teitbite Sorry I think my message got a bit confused, I pasted the code in just for clarity, but it still isn't working even with those corrections. Something is preventing the class being applied to switch it to transparent. Working on desktop but not on mobile. Are you able to take another look?

teitbite

gntodd1 Hi. Ok, I took another look and I think there is one more layer where white background is applied to. Try add this to css:

@media only screen and (max-width:787px) {
.zen-nav-fixed .zen-spotlight,
.fixed #toolbar.zen-row-wrap .zen-spotlight {
    background-color: transparent !important;
}

.fixed #toolbar.zen-row-wrap {
    background-color: transparent !important;
}

.fixed.has-scrolled #toolbar.zen-row-wrap {
    background-color: #fff !important;
}
}

gntodd1

teitbite Nice one, that's done the trick! Thanks so much for your help and for sticking with this one with me. Very much appreciated.