[zdwordParticipant]

hello, I’m looking to do a few things with my sites navbar. I am currently using the integrity stack and so far I got the navbar to go from being transparent at the top of the page to being a solid white background when you begin to scroll. I was also able to figure out how to change the text color in the navbar from white (when transparent) to black (when solid background). the two issues I’m having right now are changing the logo color from white (when transparent) to black (when solid) and having my sub-menu text in the drop down stay black even while the text on the navbar is white (when transparent) at the top of the page.

I am using a .png for my logo and tried to use some code I found from a different thread to switch from one logo image (White) to another logo image (Black) upon scroll.

I am not a coding expert and do know it very well at all. Anything I have so far I’ve just found from other threads.

This is the code I have so far… Please Help!

CSS –

.x-brand.text {
   color: #ffffff;
}

body.home .x-navbar-fixed-top .x-brand.text {
   color: #2b2b2b ;
}

body.home .x-navbar { 
   border-bottom: 0;
   box-shadow:none;
   background-color: transparent;
   position:fixed;
   width:100%;
   top:0;
  transition: 0.3s all ease-in-out;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: auto;
}

body.home .x-navbar.x-navbar-fixed-top {
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

body.home .x-navbar-inner a span{
    color: #ffffff;
}

body.home .x-navbar-inner a:hover span{
    color: #2b2b2b;
}

body.home .x-navbar-fixed-top .x-navbar-inner a span{
    color: #000000;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner a:hover span{
    color: #a0a0a0;

.x-navbar .x-nav-wrap.desktop li a span {
    color: #fff;
}

.x-navbar.x-navbar-fixed-top .x-nav-wrap.desktop li a span {
    color: #2b2b2b;
}

body .x-navbar { 
   border-bottom: 0;
   box-shadow:none;
   background-color: transparent;
   position:fixed;
   width:100%;
   top:0;
  transition: 0.3s all ease-in-out;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: auto;
}

body .x-navbar.x-navbar-fixed-top {
  border-bottom: 1px solid #ccc;

.x-navbar .mobile .x-nav li > a {
    color: #000;
}
.x-navbar .mobile .x-nav .current-menu-item > a,
.x-navbar .mobile .x-nav li > a:hover {
    color: #f0f0f0;
}

.x-nav-wrap.mobile.collapse.in {
    background-color: rgba(255, 255, 255, 0.75);
}

JavaScript –

`(function($){
$(window).bind(‘scroll’, function() {
if($(‘.x-navbar’).hasClass(‘x-navbar-fixed-top’)) {
$(‘.x-navbar .x-brand img’).attr(‘src’,’http://www.testcvc.dev/wp-content/uploads/2016/11/cvcc-logo-Header-Black-01.png’);
}else{
$(‘.x-navbar .x-brand img’).attr(‘src’,’http://www.testcvc.dev/wp-content/uploads/2016/11/cvcc-logo-Header-Black-01.png’);
}
});
})(jQuery);’

[RadModerator]

Hi there,

Thanks for writing in.

Would you mind providing your site’s URL? This http://www.testcvc.dev isn’t accessible on my end.

Thanks!

[zdwordParticipant]

Hey,

Sorry about that. I’m updating the current website at my Church and I purchased a license of x-theme, although we have a current website and didn’t want to go through the process of changing everything while we still need it up to get information out every week. I’m using “Desktop Server” to create a test website, then once I was complete with everything I was going to transfer all of the content over to my current website.

Would I need to wait till I transfer it to figure out what I need?

[Paul RModerator]

Hi,

We need to see your current set-up so we can provide you with a tailored code.

Do you mind uploading it to a temp directory url.

eg. http://yourcurrentsite/temp

You may install our under construction addons to make private until you complete your site.

http://demo.theme.co/under-construction/

Thanks

[minicostParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

As you have a mixed menu between ONE PAGE NAVIGATION and NORMAL MENU you have to create more than one menu.

On your page where you have innerlinks, like your home page:

You will create a menu on Appereance > Menus > On this menu you will have ths Custom links to :

#mission

and not:

https://www.smallbusinesscapital.ca/#mission

Andn this menu you will assign as your one page navigation menu on your home page. To do that you will click on Edit Page> Once you are in the WordPress classic back end you will select this menu as your One page Navigation Menu.

The menu with the full links https://www.smallbusinesscapital.ca/#mission you will keep as your main nav.

Hope it helps

Joao

[minicostParticipant]

ok i’m understand!

i want to change for don’t have anymore the one page nav. menu.

this is really hard to rank one page website.

So, i will more inner page but what is the best way to change the menu for don’t have any the one page menu

thanks

[JoaoModerator]

Hi There,

Just make sure your navbar links are linked to other pages not to sections of the page you are in, if that makes sense.

Hope that helps

Joao

[Author]

Posts