Docs

[Tim]

Hi X:)

I have a styling question:

I have set up a transparant navbar to create the effect in the attached screenshot. I have used this code to achieve it:

.masthead-inline .x-navbar,
.masthead-inline .x-navbar .sub-menu {
background-color: transparent !important;
position: absolute;
width: 100%;
}

.x-navbar {
  border: 0;
  box-shadow: none;
}

Now in my opinion it looks great. But my customer want to have a fixed top. Notice that with this code nothing is happening (navbar does not get fixed on top on scroll) and the nice styling is also gone when setting it to ‘fixed top’

http://comsmc-kaduseeng.savviihq.com/

I hope there is a nice solution for this, tried to search the forum but could not find it (can imagine more people have run into this).

Thanks!

p.s. I will give the login credentials of this site, while this one has a maintenance plugin switched on.

[Tim]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove this code:

.masthead-inline .x-navbar,
.masthead-inline .x-navbar .sub-menu {
background-color: transparent !important;
position: absolute;
width: 100%;
}

And add this :

@media (min-width:979px){
.x-navbar.x-navbar-fixed-top {
    background-color: transparent;
}
.home div#x-section-1 {
    margin-top: -102px !important;
}
}

Hope that helps.

[Tim]

Hi Christopher,

I think wel are almost there. Notice that on loading the page, at first het navbar is white (or there is no background image). When scrolling down and back, everything is correct.

When you have a look, can you also tell me why there is a second scroll bar in the browser window? Did not see this before.

Thanks so much:)

Cheers!

[Tim]

Hi,

I have updated the css with this

@media (min-width:979px){
.x-navbar.x-navbar-fixed-top {
    background-color: transparent;
}
.home div#x-section-1 {
    margin-top: -103px !important;
}
}

.x-navbar {
    transition: 0.2s all linear;
}

.x-navbar.alt-color {
    background-color: #fff;
}

.x-navbar {
  border: 0;
  box-shadow: none;
  background-color: transparent;
  
}

And added this which i found on the forum:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 100) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

I think all work very nice now. Except I still have this problem when I ad a section, there comes a second scrollbar on the right…have no answer to this..

Thanks!

[Christopher]

Hi there,

Please add this :

body {
    overflow: hidden;
}

Hope it helps.

[Tim]

That works:)

Only thing left, the view on mobile..

While we have the code with min-width 979, there are small (similar as on desktop) lay out problems left on mobile.

Any suggestions?

Cheers!

[Rupok]

Hi there,

Thanks for updating. Would you point us the problem with a screenshot? It seems fine to me or maybe I didn’t get this properly.

Cheers!

[Tim]

The mobile view has a white background and is not transparent.

[Rupok]

Hi there,

Thanks for updating. If you make the mobile navbar transparent as well then it will look like this when you open the menu – http://prntscr.com/axcqpz

If you still want that, you can use

@media only screen and (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 0;
}
}

Hope this helps.

[Author]

Posts