[lupchiancristiParticipant]

I have insserted the following code in order to make the nav bar appear when you scroll down but the menu and logo is not showing up on refresh page only after scrolling down.
The lines of code I took them from this forum…maybe is something what I am missing.
I want to make something similar with http://www.polder-events.nl/
if someone would know to tell me how can I make the content to scroll over the slider etc

X-theme
url: butterfly.design

Thank you !

CSS :
.x-navbar {
background-color: rgba(0,0,0,0.0) !important;
transition: 0.5s all ease-in-out;
}
.x-navbar.nb-trans {opacity:0.8;
background-color: #837B78!important;
}

JavaScript : jQuery(document).ready(function($) {

function navbarChangeColor() {
var $slider = $(‘.x-slider-revolution-container.below’),
$sliderHeight = $slider.outerHeight();
$navbar = $(‘.x-navbar’);

if( $(window).scrollTop() > $sliderHeight ) {
$navbar.addClass(‘nb-trans’);
} else {
$navbar.removeClass(‘nb-trans’);
}
}

navbarChangeColor();

$(window).scroll(navbarChangeColor);

});

[lupchiancristiParticipant]

One more thing…on mobile the nav bar is not existing at all…

[DarshanaModerator]

Hi there,

Thanks for writing in!

Can you confirm that you are fully updated? (Theme and Plugins)

You can find the latest version numbers here: (http://theme.co/x/member/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Thanks!

[lupchiancristiParticipant]

Theme and plugin are updated.
Thanks for the reply !

[ThaiModerator]

Hi There,
Thanks for your confirmation.
Please try to remove following code from the Customizer > Custom > CSS:

.x-navbar-wrap {
   margin-top: -1000px;}

Hope it helps.

[lupchiancristiParticipant]

If I do that the nav bar is going on the bottom of the slider.

[lupchiancristiParticipant]

i changed from margint-top :1000px to 650px and its okay on descktop but on mobile there is no navbar or mobile button on mobile !

Thank you !

[lupchiancristiParticipant]

Again….is confusing me….If i let the following code on cuustom css :
.x-navbar-wrap {
margin-top: -650px;}
on the home page its okay….though on mobile is dissapearing..no navbar or menubutton at all.If I go on a different page the content is not all visible what makes me belive that the css is pulling up the rest of the content or all the container.

if I remove the code the nav bar is moving under the slide on the front page , but if I go on a different page it is okay and the rest of the content is on place.

what I should do ? please ? I am wrecking my head for two days with this and I cant move over.

url. : http://www.butterfly.design
X-Theme

[lupchiancristiParticipant]

Sorted….slider was activated above the masterhead instead of bellow master head…dum

[lupchiancristiParticipant]

but still the nav bar is not transaprent now like in this example http://www.polder-events.nl/…

[ZeshanMember]

Hi there,

Please use following CSS code for navbar:

header.masthead.masthead-inline {
  margin-bottom: -70px;
}

Thanks!

[lupchiancristiParticipant]

it is working with the above code but the problem is that now the slide is moving to the right on refresh.After scrolling down is okay but on refresh is not
thank You

[ZeshanMember]

Hi there,

In that case, try this CSS code instead:

header.masthead.masthead-inline {
  margin-bottom: -70px;
  height: 0;
}

Thanks!

[lupchiancristiParticipant]

Perfect.

Thank You very much for your support.

[Paul RModerator]

You’re welcome!

[Author]

Posts