Create a Fixed Top Bar

[gaga4]

Hello,

I would like my top bar to be fixed like my navigation menu. I had a look at the solutions already provided on the forum and followed the instructions but it makes my top bar transparent.Here is what I’ve done :

Please add the following code under Customizer > Custom > Global Javascript:
jQuery(function($) {
$(window).scroll(function(){
if($(window).scrollTop() > 420 ){
$(’.x-topbar’).addClass(‘x-topbar-fixed’);
} else {
$(’.x-topbar’).removeClass(‘x-topbar-fixed’);
}
});
});
Please also add this CSS under Customizer > Custom > Global CSS:
.x-topbar.x-topbar-fixed {
position: fixed;
width: 100%;
top: 0;
}

.x-navbar.x-navbar-fixed-top {
top: 46px;
}

I already have the following CSS for my top bar :

.x-topbar .p-info { width: 100%;}
.x-topbar .p-info, .x-topbar .p-info a, .x-topbar .x-social-global a {
font-size: 13px !important;
}

Thanks a lot in advance for your help !

[mldarshana]

Hi Gaelle,

Thanks for writing in! I have checked your site URL assisgned to your Themeco account but it seems that you have enabled maintenance mode. Could you also please set a background color to your topbar and see if that helps.

You can use the following CSS rule and change the color accordingly.

.x-topbar.x-topbar-fixed {
  background-color:red;
}

Hope that helps.

[gaga4]

Hello,

It isn’t working. The top bar is still disappearing when I scroll. Would you like access to the back office of wordpress ? Thanks in advance for your help

Gaelle

[rad]

Hi @gaga4,

Thanks for posting in.

Sure, please provide the site’s URL and login credentials in a secure note. I checked your site one is under construction, then another one doesn’t have this changes. I assume it’s the one behind a under construction page.

Thanks!

[jade]

Hi there,

Please try this JS code instead:

jQuery(function($) {
  $(window).scroll(function(){
    if($(window).scrollTop() > 0 ){
    	$('.x-topbar').addClass('x-topbar-fixed');
    } else {
    	$('.x-topbar').removeClass('x-topbar-fixed');
    }
  });
});

Then this CSS code:

.x-topbar.x-topbar-fixed {
    position: fixed;
    width: 100%;
    top: 0;
}

.x-navbar.x-navbar-fixed-top {
    top: 46px;
}

Please note that since this is modifying the default display of the theme, it requires some customization which goes beyond the scope of our support. If you are not comfortable making further changes and if you require more customization on your site, it would be best to get in touch with a developer.

Hope this helps.

[gaga4]

Thank you for your answer but it is still not working, the top bar is becoming transparent when I scroll.
Thank you for your help,

Gaelle

[paul.r]

Hi Gaelle,

I added the code that my colleague have provided and it seems to work.

Please clear your browser cache and check again.

Thanks

[gaga4]

Yes it’s working now !!! Thank you so much you are all doing an amazing job ! Have a nice day !

[mldarshana]

Glad it is working for you now

[gaga4]

Hello again,

I’m sorry to bother you again but I just realised that the fixed top bar is working all the time on screens bigger than 980px but on smallest screens I have a space between the top bar and the navbar and the navbar is not staying fixed. Thanks in advance for your help.

Gaelle

[rad]

Hi @gaga4,

Fixed navigation is intentionally disabled for mobile because with a long menu, it will cover the entire screen. And since it follows you as you scroll, then there is no way you could get into the menu items outside the screen dimension. To demonstrate this, please add this CSS to your global custom CSS.

.x-navbar.x-navbar-fixed-top {
    position: fixed !important;
}

Then open your first menu item, then open its sub-menu and so on. Then scroll it down and try accessing other menu items.

The spacing is there since fixed positioning isn’t implemented. Permanently adding that CSS should remove the space. BUT, if you plan not to implement fixed positioning on mobile, then you can simply remove the space by changing this CSS

.x-navbar.x-navbar-fixed-top {
    top: 46px;
}

to this

@media ( min-width: 980px ) {

.x-navbar.x-navbar-fixed-top {
    top: 46px;
}

}

Thanks!

[gaga4]

Thanks a lot Rad, I used the last CSS, the topbar is still there on mobile and the space is removed.

[rad]

Hi @gaga4,

I see, in that case, we’ll have to exclude the entire CSS from mobile view. Please update your CSS to this,

@media ( min-width: 980px ) {

.x-topbar.x-topbar-fixed {
    position: fixed;
    width: 100%;
    top: 0;
}

.x-navbar.x-navbar-fixed-top {
    top: 46px;
} 

}

Wrapping all of them.

Cheers!