Sticky Mobile Top Bar

[Taffy]

Dear Support Team,

We require the Mobile Top Bar to be sticky. See screenshot.

Please let us know how to make this possible.

Cheers,

Mark

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Using the theme’s functionalities that’s not possible. Will forward to the development team to see if there is any workaround.

-Rui

[Taffy]

That would be greatly appreciated.

Please let me know ASAP.

Thanks,

Mark

[David Martin – Support]

Hi Mark,

Can you enable this on the site. This should do it:

@media only screen and (max-width: 991px) {
#top-bar-sticky-wrapper, 
#top-bar.sticky-top-bar {
    display: block !important;
}
}

[Taffy]

This did not work.

Top bar disappears upon scrolling.

See attached.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi Mark,

Please replace with this CSS, this will sort it:

#mobile-top-text {
position: fixed;
top: 0!important;
width: 100%;
}
#mobile-header-sticky-wrapper {
top: 52px!important;
}
@media only screen and (max-width: 991px) {
#container {
padding-top: 127px;
}
}

Let me know!

– Ed

[Taffy]

Hi Ed,

Thanks for trying, but the CSS didn’t work.

See screen-shots.

IMG_5177 – Extra padding at top???
IMG_5178 – Mobiel top still disappears

I’ve left the CSS in place.

Cheers,

Mark

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Apologies, copied incorrectly:

#mobile-top-text {
position: fixed!important;
top: 0!important;
width: 100%;
}
#mobile-header-sticky-wrapper {
    position: fixed!important;
    width: 100%;
    top: 52px!important;
    z-index: 999;
}
#mobile-header-sticky-wrapper > header {
    position: relative!important;
}
@media only screen and (max-width: 991px) {
#container {
padding-top: 127px;
}
}

– Ed