Docs

[imageforyou]

Hi,
for new project I’ve chosen Agency Theme. Layout: Stacked.

Is it possible to have logo visible on the left after scroll down?

Site: http://neu.hartig-info.de

Thank you

[Christopher]

Hi there,

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

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

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

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

Hope that helps.

[Paul R]

Hi,

Yes that’s possible.

Please add your logo as a menu item – https://www.screencast.com/t/aoEy53TxJcN

Then add this in Custom > Edit Global CSS in the customizer.

.x-navbar .menu-item-10 {
    display:none;
}

.x-navbar.x-navbar-fixed-top .menu-item-10 {
    display:block;
}

Hope that helps.

[imageforyou]

Hi Christopher, thank you. I tried your solution but Menu was only fixed (centered). Thank you anyway.

Hi Paul. Thank you. I tried your solution too. Logo appears now twice on page load. Please have a look at http://neu.hartig-info.de

Thank you 🙂
Michael

[Thai]

Hi There,

Please also add the following CSS:

.x-navbar .menu-item-133 {
    display:none;
}

.x-navbar.x-navbar-fixed-top .menu-item-133 {
    display:block;
}

.x-navbar .menu-item-133 a {
    padding-top: 0 !important;
}

.x-navbar .menu-item-133 img {
    max-width: 135px;
}

Hope it helps 🙂

[imageforyou]

Wow – thats magic! Thank you!

And how can I get rid of white line (active menu element)? But only from Logo. Please see screenshot.

Thank you!

[imageforyou]

OH – and now menu item “KONTAKT” is missing on page load. But after scroll it appears. How to fix that?

Thank you!

[Rupok]

Hi there,

Thanks for writing back. Kindly remove this code first :

.x-navbar .menu-item-10 {
	display: none;
}

Then use this CSS to get rid of the line from logo :

.x-navbar .desktop .x-nav > li.menu-item-133 > a > span {
	box-shadow: none;
}

Cheers!

[imageforyou]

Amazing! Thanks so much 🙂

Michael

[Thai]

You’re most welcome 🙂

[Author]

Posts