How to get Logo to Show in Navbar when scrolling Down

[gnazar123]

Hello,

my website is valueadd.us and I am using the Ethos stack.

As i scroll down the site, i want my logo to show up in the nav bar on the top left.

I’ve updated to the pro theme and am wondering how can i make that happen?

I’ve tried changing my Header settings by going to Theme Options>Header>Layout>Inline but the Header moves from the middle of the page and doesn’t fit into the left section of the navbar when scrolling.

Thank you

[thai]

Hi There,

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

• Please add this custom JS under Theme Options > JS:

jQuery( function($) {
	var logo = $("a.x-brand.img").clone();
	$(".x-navbar-inner .x-container").prepend(logo);
});

• Please add this custom CSS under Theme Options > CSS:

.x-navbar-inner .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

.x-navbar-inner a.x-brand.img {
    max-width: 150px;
    position: absolute;
    top: 5px;
    opacity: 0;
    transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top a.x-brand.img {
    opacity: 1
}

Hope that helps and thank you for understanding.

[gnazar123]

Thank you!

[ruenel]

You’re welcome!
We’re glad @Thai were able to help you out.