Docs

[Johannes G]

Hello,

here is my question: How can I get my top bar (together with nav links) to be fixed on top of the nav bar links when scrollling down? (but without the logo)

Bonus question: I’m using wooCommerce and want to display the cart icon & the items in the cart number in the top bar. What is the code for that? Is there a way to insert widgets that stay open?

You have to login in order to see my site since its in maintenance mode.

here are the login details:

http://organicbabyfoodshop.com/wp-admin
User: check next post
Pass: check next post

Regards
Johannes

[Johannes G]

This reply has been marked as private.

[Johannes G]

Extra Bonus Question: How do I make the space (padding/margin) for the nav bar links smaller?

[Christopher]

Hi there,

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

@media (min-width:979px){
.x-topbar.x-navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}
.x-navbar-fixed-top {
    left: 0;
    right: 0;
    position: fixed;
top: 32px !important;
}
}

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");
		}
	});
});

This option is not available for topbar, you can enable woocommerce navbar menu under Customize -> Woocommerce.

Hope it helps.

[Johannes G]

Hi,

Good: Nav bar links are fixed wit ha space, so that there is theoretically enough space for the top bar.

Bad: The top bar is not appearing on in the free space above the nav bar links. The space is empty or transparent.

Please help me to make the top bar appear on top of the nav bar links.

[Christopher]

Hi there,

Please update this code :

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

to :

.x-topbar.x-navbar-fixed-top {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 2000;
}

Thanks.

[Johannes G]

Hello,

Check the picture: Top bar is visible but there ist still an extra space above.
Please help.

Regards
Johannes

[Johannes G]

please help

[Rad]

Hi there,

You should update the provided CSS and not by adding it 🙂

Please remove this,

top: 32px !important;

Cheers!

[Author]

Posts