tollbar sticky and menu

Hi,
Can someone help me with a fix for this?
I have my theme that i’m working and if from USer i check to see toolbar, when i go to front and scroll down, i see toolbar over a part of my header sticky.

So is there a fix like when toolbar is enable, header to have margin like 32px. when toolbar is off, margin 0 forheader -menu sticky.

Thank you

Hi,

you could use jQuery to resolve this problem. Add the next code:

if($(".toolbar_class").length > 0){
$(".header_class").css(“margin-top”, 32);
} else {
$(".header_class").css(“margin-top”, 0);
}

Anyway, could you share your link to check the code and find the best solution? It is also possible to use php.

Regards

Hi,
thanks,
i’m on localhost now

.sticky-header is class for sticky header menu
in your example what is header_class? to try to adapt to my code

Again thank you

Hi,
use this code into your css file. I use it into my themes.

@media ( max-width: 979px ) {
body.admin-bar .sticky-header  {
	top: 45px;
}
}

@media ( min-width: 980px ) {
body.admin-bar .sticky-header  {
	top: 32px;
}
}

body .admin-bar #wpadminbar {
    position: fixed;
}

Hi,

the option ‘header_class’ is the class for your header. In your case, ‘sticky-header’.
So, the final code is:

if ( $("#wpadminbar").length > 0 ) {
$(".sticky-header").css(“top”, 32);
} else {
$(".sticky-header").css(“top”, 0);
}

Regards

1 Like

Hi CreaboxThemes

Good solution your provided there, but check first if Envato Theme Check is ok with this.
From what i know, they will find this class wpadminbar and will be shown Warning on test.

Hi,

you are right. It’s better use css styles. And better if it used php to check if the user is logged in.
So, where the header is loaded, you have to add the next code to chek it:

... class="sticky-header <?php echo (is_user_logged_in()) ? sticky-header-logged'' : '' ?> " ...

And then, in the css styles, add the next code:

.sticky-header{
     top: 0px;
}
.sticky-header.sticky-header-logged{
     top: 32px;
}

It could be a good solution.

Regards

1 Like