Docs

[UniteCoop]

Hi, trying to figure how to make the nav bar do what’s happening on this site: http://vpenergy.ca/

I have a background image set in the nav bar, but it just stays static when you scroll.
Current working site: http://www.fitpark.ca

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar {
    position: relative !important;
    background-attachment: fixed !important;
}

Let us know how this goes!

[UniteCoop]

Thanks!! is there a way to keep the menu +logo fixed and just have the background image scroll up? With the code you gave me, everything scrolls up.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar-fixed-top .x-container.max {
    position: fixed !important;
    left: 13% !important;
}
.x-navbar-fixed-top .x-nav-wrap.desktop {
    position: fixed !important;
    display: block !important;
    width: 100% !important;
    right: 13% !important;
}

Let us know how this goes!

[UniteCoop]

Beautiful! Thank you muchly! One last thing regarding this.. is there code to put a white background behind the the fixed menu+logo when you scroll passed the background image ?

[Rue Nel]

Hello There,

To resolve your issue, please do the following:
1] Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }
    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 500 ) {
        $navbar.addClass('x-navbar-solid' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-solid' + boxedClasses);
      }
    });
  }
});

And then please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar-solid .x-container.max.width {
    background-color: #fff !important;
}

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

[UniteCoop]

Not seeming to work 🙁 just put the code in and no change

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[UniteCoop]

This reply has been marked as private.

[UniteCoop]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for getting back to us. The code did not work out because you did not inserted the exact code and it generated a JS error (http://prntscr.com/corknj).

I went ahead and edited the code for you to check out the result of this code.

Hope this works out for you.

[UniteCoop]

Thank thank thank you!! do you know what modification i can make so the white bar goes the full length of the screen and not jus the width of the logo and menu items?

[Thai]

Hi There,

Please find this CSS:

.x-navbar-solid .x-container.max.width {
    background-color: #fff !important;
}

And change to this:

.x-navbar-solid .x-container.max.width {
    background-color: #fff !important;
    width: 100%;
    max-width: 100%;
    left: 0 !important;
    padding-left: 13%;
}

Hope it helps 🙂

[UniteCoop]

Boom! It worked.. thank you kindly.. the thing is now the logo keeps pushing in from the left and covering up the menu??

[Friech]

Hi There,

I don’t see the logo covering the menu, would you mind providing us some screenshots?

Thanks.

[Author]

Posts