Docs

[arswitzer]

I love ethos 3. When scrolling down the page and the navbar locks to the top. How would it be possible to keep the logo that is stacked above the navbar visible at all times just like the navbar? Thanks in advance!

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-logobar {
  position: fixed;
  width: 100%;
}

.x-navbar {
  position: fixed !important;
  top: 136px !important;
  width: 100%;
}

If you need further adjustments please provide your URL.

Thanks,

Joao

[arswitzer]

Thanks, but that isn’t quite doing what I needed. Please reference the 2 images shown. The site in reference is test.moverightkc.com

[arswitzer]

Here are the reference images to see what I would like to be done.

[Rue Nel]

Hello There,

Thanks for providing the screenshots. As you are using stacked layout, it would be a bit tricky. Let’s me try to help you to achieve this.

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

jQuery( function($) {    
      $(window).on("scroll", function () {    
    if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
      $('.x-logobar').addClass('x-logobar-fixed-top');
                }else {
                        $('.x-logobar').removeClass('x-logobar-fixed-top');
                }   
  }).scroll();
});

Then add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
  background-color: #fff !important;
  padding-bottom: 10px;
  top: 0;
}

.x-logobar.x-logobar-fixed-top {
  background-color: #fff !important;
  z-index: 9999;
}

.x-brand img {
  transition: all 0.2s ease 0s;
}

We would loved to know if this has work for you. Thank you.

[arswitzer]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your admin login.

I went ahead and added the code provided above then made some adjustment to css to make it work.

.x-navbar.x-navbar-fixed-top {
  background-color: #fff !important;
  padding-bottom: 10px;
  top: 102px;
}

.x-logobar.x-logobar-fixed-top {
  position:fixed;
  width:100%;
  top:0;
  background-color: #fff !important;
  z-index: 9999;
}

.x-brand img {
  transition: all 0.2s ease 0s;
}

Kindly check on your end.

Thanks

[arswitzer]

Looks great! Thanks for all of the help!

[Paul R]

You’re welcome! 🙂

[Author]

Posts