Docs

[richardvargas155]

Is it possible to keep the Top bar always visible even while scrolling, and not just at the very top of the page only? Thanks!

Link: test.aycofarms.com

Regards,

Rich

[Rupok]

Hi Rich,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-topbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

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

Hope this helps.

Cheers!

[richardvargas155]

This kind of worked. It does not respond well when resizing the window to mobile, and it overlaps the nav bar by about 10% on load and the only way to fix it is to scroll and then it jumps to the correct orientation. Please see attached. Thanks!

[Nabeel A]

Hi again,

I’ve tested your site in multiple browsers and looks good on my end, I also tested on mobile and I see no overlapping, can you please clear your browser’s cache and reload the site?

Let us know how this goes!

[richardvargas155]

My apologies, I changed it back because I couldn’t stand working with the bar like that.

[Jade]

Hi Rich,

Please update the code to:

.x-topbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

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

@media (max-width: 767px) {
    .x-navbar-fixed-top {
        top: 75px;
    }
}

Hope this helps.

[richardvargas155]

Sorry here is an updated link: http://s622766227.onlinehome.us/

The problem is still occurring.

[richardvargas155]

It is also sticking to the top on mobile as well. I would like the mobile nav to remain the way it was prior to this change.

[Rue Nel]

Hello There,

Please have the given code updated. You can make use of this code instead:

@media(min-width: 980px){
  .x-topbar {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
  }

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

The code will only make the topbar and navbar fix in medium and desktop screens. It will retain the default setting in smaller devices.

Hope this helps.

[Author]

Posts