Docs

[scvizar]

Hello, I’m working on a new website, sorry but I didn’t find a solution on the forum, so please can you help me?
I’m using Superfly menu, so I’ve hided the navbar. On the homepage (maybe will be other similar layout pages) I have a Revslider on the top, and the logobar below.
I would like that when the user scroll down, the logobar go fixed on top, with a 0.5 opacity.

It’s possible?
thank you!

[scvizar]

This reply has been marked as private.

[Lely]

Hello There,

Thanks for writing in and giving us screenshot! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[scvizar]

This reply has been marked as private.

[Paul R]

Hi,

You can add this in Custom > Edit Global Javascript in the customizer

jQuery(function($) {

  var $logobar = $('.x-logobar');

 

   

    $(window).scroll(function() {

      if ( $(this).scrollTop() >= logobarOffset() ) {
        $logobar.addClass('x-logobar-fixed-top');
      } else {
        $logobar.removeClass('x-logobar-fixed-top');
      }

    });

  function logobarOffset() {
    return $('.x-logobar').offset().top - $('#wpadminbar').outerHeight();
  }

});

Then add this in Custom > Edit Global CSS

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

Hope that helps.

[scvizar]

it works on desktop, but the logobar seems bigger and not centered anymore, and I would like to reduce the height a little.

it does not work on mobile.

[scvizar]

I’ve just added

  left: 50px;
  right: 0;
  opacity: 0.9;

to css, the logo seems centered now. But I would like to reduce the size of the logo and the logobar.

And, I have still the problem on mobile.

[Paul R]

Hi,

I went ahead and fix it for you.

I changed js code to this.

jQuery(function($) {

  var $logobar = $('.x-logobar');   

    $(window).scroll(function() {
        var distance = $('.masthead').offset().top - $('#wpadminbar').outerHeight();
      if ( $(this).scrollTop() >= distance ) {
        $logobar.addClass('x-logobar-fixed-top');
      } else {        
        $logobar.removeClass('x-logobar-fixed-top');
      }
    });

  

});

Kindly check on your end.

[scvizar]

it doesn’t work well… the logo/logobar is not centered, and the height of the logobar is too big…

[Rupok]

Hi there,

I am not seeing such menu for your site on mobile. I am attaching a screenshot on my end which shows it’s fine.

Thanks!

[scvizar]

The issue is visible if you scroll down the page. Same problem on ipad

[Rupok]

Hi there,

I have scrolled down but no such issue. Check attachment.

Thanks!

[scvizar]

please don’t click on the menubar on the left, this is why you don’t see the error

[scvizar]

please don’t click on the menubar on the left, maybe this is why you don’t see the error. I see error on the iphone and ipad.

[Rue Nel]

Hello There,

Thanks for updating in! To reduce space between the logo and menu, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

body #sfm-sidebar .sfm-va-middle {
    vertical-align: top;
    padding-top: 140px;
}

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

[Author]

Posts