Docs

[bigdreams]

Hello,

i already did this once, but i have some problems in fixing some minor problems..

i would like to have a navbar like on this page (http://brandpackage.at/)

TOP: transparent navbar over revolution slider
scroll down: background of navbar #b7ce4a

and on mobile the background (navbar) should be always #b7ce4a

thats the code i use right now, but its not working.. -.-” :

/* NAVBAR */
@media(min-width: 768px) {
.x-navbar.x-navbar-fixed-top {
background: transparent;
}

.x-navbar.x-navbar-fixed-top.x-navbar-solid {
background: #b7ce4a !Important;
}

.home .x-slider-container {
margin-top: -80px;
}
}

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

.x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: 0;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
}

—— thank you ———–

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

[bigdreams]

sorry forgot that totally http://www.oasechurch.tv

thank you

[Rupok]

Hi there,

Here goes the correct steps to do that :

#1. You can add this under Custom > JavaScript in the Customizer.

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

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

#2. Then add this under Custom > CSS in the Customizer.

.x-navbar {
	background: transparent;
}
.x-navbar.alt-color {
	background-color: #b7ce4a;
}
@media only screen and (max-width: 979px) {
.x-navbar {
	background-color: #b7ce4a;
}
}

And make sure to remove the other codes you added earlier.

Cheers!

[bigdreams]

still have some troubles :/

at the beginning its green.. than if u scroll Down it get transparent

[bigdreams]

ok solved it by my own

.home .x-slider-container {
margin-top: -67px;
}

this was missing

thank you!

[bigdreams]

but maybe you can help me in another thing to please..

i would like to have at the top the white OC Logo like now.. and when i scroll down, change to a different logo (same logo in black)

would that be possible ?

thank you!

[Christian]

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. Thanks for understanding.

[AppScholar2016]

Hello,

I have applied this code to both custom javascript and CSS and it is not working. Code is still there.

My website is: https://appscholar.com

I’m wanting the navigation background and the topbar background to be transparent and the column image underneath to then show behind top bar and navigation.

Any help is much appreciated.

Thanks!

[Joao]

@appscholar2016

Hi there

As we have no concluded with the other customer I would ask that you kindly start a new thread and refer to this one as a reference.

I am asking that in order that both of you get the deserved attention.

Please explain on this new thread what you are trying to achieve and also provide your website url.

Thanks

[AppScholar2016]

Hi,

I did start my own thread and was told by your team to reply to this one instead.

Please see my original thread here: https://community.theme.co/forums/topic/change-nav-background-to-transparent-have-column-picture-move-underneath/

Can someone please help me on this issue?

Thanks!

[Rad]

Hi there,

I’ll reply to your other thread 🙂

Thanks!

[bigdreams]

ok thank you.. did it by my own (you can see code below if someone needs it)

another thing is. Can we change the code that the transparent navbar at the top is just on the home site transparent.. anywhere else it should be green like when u scroll down.. is that possible ?

thank you!

jQuery(function($) {
    $(window).scroll(function(){ 
        var W = $(window).width();      
        if($(window).scrollTop() >50 && W > 768) {
              $('.x-navbar').addClass("x-navbar-solid");
                $('.x-brand img').attr("src","http://www.oasechurch.tv/wp-content/uploads/2016/08/LOGOblack.png");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

jQuery(".page-id-21 .x-brand img, .page-id-27 .x-brand img, .page-id-31 .x-brand img, .page-id-33 .x-brand img, .page-id-16 .x-brand img").attr("src","http://www.oasechurch.tv/wp-content/uploads/2016/08/LOGOblack.png");

[Jade]

Hi there,

I have checked your site and your navbar seems to be function the way you are requesting it to.

http://www.oasechurch.tv/

It is only transparent in the homepage and appears green in the inner pages.

Let us know if you need further help.

[Author]

Posts