Docs

[brendanduggan11]

Hello, I have been searching the forums and working for hours but I can`t seem to get my Nav Bar to function how I want it.

My site is http://www.sunshinesalsatours.com

I am wanting the nav bar to be transparent at the top of the screen then darken as you scroll down. I have gotten it to work fairly well on the lap top but on mobile it is not functioning properly.

1)In mobile verticle (Ex:1) the slider is pushed up to the top underneath the menu and when I touch the menu button the it pushes everything down and the text is unreadable (ex2).

I would like the slider to be up against the bottom of the menu so we can see the whole thing and when the menu is activated it will be pushed down again so we can see it.

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 979px){
    .home .x-slider-container.below {
        margin-top: 0 !important;
    }
    .x-navbar .mobile .x-nav li>a {
        color: #fff;
    }
}

Hope it helps 🙂

[brendanduggan11]

No it doesnt help. Sorry for some reason the attachments never attached and my post was cut off.

Also in example EX3 you can see that it looks fine in horizontal but when you click the menu it come down over top of the slider and is transparent. I would like to make it to when you open the menu it pushes the slider down as well.

Thank you

[Rad]

Hi there,

Please add this as well,

@media (max-width: 979px) {
body .x-navbar.x-navbar-fixed-top {
    background-color: white !important;
    position: fixed;
    width: 100%;
    height: auto !important;
}
}

Thanks!

[brendanduggan11]

Im still having problems. Attached is the screen shot I have tried on both safari mobile and chrome mobile. I need to push the slider down (only on mobile) so that it is flush with the bottom of the mobile nav bar. Thank you.

Edit to clarify: The nav bar menu is covering half of my slider so I want to push the slider down so its it flush with the bottom of the navbar.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve your issue,

@media (max-width: 979px){
  body .masthead {
    height: auto !important;
  }
}

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

[brendanduggan11]

It worked. Thank you.

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts