Docs

[Advasa]

Hello

I am using the top bar of a website for the business phone number and would like it to be sticky on mobile.
How can I achieve this?

Thanks

Justin

[Advasa]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> JavaScript :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-topbar').addClass("x-navbar-fixed-top");
		} else {
			$('.x-topbar').removeClass("x-navbar-fixed-top");
		}
	});
});

Please add following code in Customize -> Custom -> CSS :

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

Hope that helps.

[Advasa]

Thank you that worked perfectly 🙂

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Advasa]

Come to think of it how can I make the top bar sticky on all devices instead of just mobile??

Thanks

Justin

[Thai]

Hi Justin,

Please also add the following CSS:

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

Hope it helps 🙂

[Advasa]

Thanks!

[Rahul]

You’re most welcome!

Let us know if you have anything else to ask.

Thanks for using the X theme!

[Advasa]

Thank you

How can I make the .x-icon-plus-circle that links the the header widget sticky on mobile as well?

Cheers

Justin

[Jade]

Hi Justin,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
    .x-widgetbar .x-widgetbar-inner {
        position: fixed;
    }
}

Hope this helps.

[Advasa]

Hello

I tried adding that code and it didn’t work, when I scroll down on mobile the image disappears.

Thanks

Justin

[Christopher]

Hi there,

Please try this code :

.x-btn-widgetbar {
    position: fixed;
}

Hope it helps.

[Advasa]

Hello

Thanks that made it sticky but when I slide the screen down it becomes unclickable.
How can I fix this?

Thanks

Justin

[Lely]

Hello Justin,

Please update above CSS to this:

.x-btn-widgetbar {
    position: fixed;
    z-index:99999;
}
.x-widgetbar-inner {
    position: fixed;
}

Hope this helps.

[Author]

Posts