[ThaiModerator]

Hi There,

Please update the previous CSS a bit:

@media (max-width: 767px){
header.masthead.masthead-inline .x-topbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2000;
}
}

Hope it helps 🙂

[tdgarveyParticipant]

Hi,

I replaced:

@media only screen and (max-width: 767px) {
header.masthead.masthead-inline .x-topbar {
  position: absolute;
}
}

with your updated version, but it still stays fixed at top on mobile/small screen.

[FriechModerator]

Hi There,

Currently, there are two css rules that giving the topbar a position: fixed; property

You can add the .no-touchevents class on the css selector to make it desktop specific and don’t affect the mobile.

.no-touchevents .masthead.masthead-inline .x-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000;
}

I think there is no need for the second css rule. Please remove that.

Hope it helps, Cheers!

[tdgarveyParticipant]

Hi,

The no-touchevents class did it. It works proper on mobile.

When on a desktop, if you shrink the window small enough to enable the mobile menu the topbar then sticks and does not scroll. Is it possible to have it scroll up as well or is there no way to have it work exactly like mobile on the desktop as well?

[Nabeel AModerator]

Hi again,

Glad it worked for you. Desktop behaves differently than mobile devices. You probably not be able to get the same result since there are different classes for desktop and mobile devices. This could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[Author]

Posts