Docs

[Joao]

Hi There,

Erase the JS you have at Appereance Customizer Custom Javascript.

Add this codes to make your navbar change from transparent to white and the navbar links from white to black:

ON Appereance Customizer Custom CSS

.x-navbar {
    border: none;
    box-shadow: none;
}
.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 {
    -moz-box-shadow:   none;
    -webkit-box-shadow: none;
    box-shadow:         none;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: #272727;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}

On Appereance Custom Javascript:

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $('.home .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

To change the logo color we will need to switch your logo image for that you will use this code Below on appereance Customizer Custom Javascript. You will need to update the logo URL for your image files. The first link should be changed for a black version of your logo.

jQuery(function($) {
  $(window).scroll(function() {
 var scrollPos = $(window).scrollTop();
   if($(".home .x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".home .x-navbar-fixed-top .x-brand img").attr("src","//www.meetmyguide.com/wp-content/uploads/2016/06/lgog%E6%AD%A3%E7%A2%BA%E6%AA%94-%E7%99%BD%E8%89%B2-2.png");
   } else {
      $(".home .x-navbar-fixed-top .x-brand img").attr("src","//www.meetmyguide.com/wp-content/uploads/2016/06/lgog%E6%AD%A3%E7%A2%BA%E6%AA%94-%E7%99%BD%E8%89%B2-2.png");
   }
  });
});

4- Setup at Appereance Customizer Header your logo as the BLACK version of it. Also set your Navbar links as black on Ubermenu and Appereance Customizer Header.

I Believe that will work, please test it on your end and let us know how it goes.

[Chiweilin]

Hi Joao,

Thanks for your help. I have update everything you gave me, but I still find 3 problems.

1. When on laptop or computer screen, when land on my homepage, the logo stays black (which is not good as it can’t stand out from a darker Rev. Slider) and doesn’t show as white until I scroll slightly a bit downward. After the logo changes to white, it stays white and works perfectly well (stays as white on top, and turns black when the white header appeasrs) even though I scroll all the way to the very top. For rest of the pages, it works well.

2. When landing on the homepage on mobile devices, the logo stays as black (exactly what I want). But it turns white after scrolling a bit downward, thus it stays white and never turn back to black again. Which is not good because the white logo can’t stand out from the white background header.
For rest of the pages, it works well.

3. On homepage page when viewing from laptop or computer screen, the main-menu stays black after I set Navbar Links as black as you taught me (but I couldn’t figure out where Ubermenu is in my WordPress, so I didn’t set black on Ubermenu). I need the main-menu white when the white header has not showed up on the top of the page.

Again, thank you so much. Looking forward to hearing from you.

Thanks,
Wei

[Joao]

Hi Wei,

First I would like to apologize but at this time I did the changes myself for you. You can compare the messages here with your setup:

I have added to your Custom CSS:

.home .x-navbar .desktop .x-nav > li > a {
    color: white;
}

@media (max-width:979px){

a.x-brand.img {
background: url("//www.meetmyguide.com/wp-content/uploads/2016/06/Logo-Black.png") no-repeat 0 0 !important;
display: block;
}
}

And I upgraded your JS to:

/*Transparent header*/
jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $('.home .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

jQuery(function($) {
  $(window).scroll(function() {
    if( $(window).width() < 769 ){
    return false;
}
 var scrollPos = $(window).scrollTop();
   if($(".home .x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".home .x-navbar-fixed-top .x-brand img").attr("src","//www.meetmyguide.com/wp-content/uploads/2016/06/Logo-Black.png");
   } else {
      $(".home .x-navbar-fixed-top .x-brand img").attr("src","//www.meetmyguide.com/wp-content/uploads/2016/06/lgog正確檔-白色-2.png");
   }
  });
});

jQuery(document).ready(function($) {
  if( $(window).width() < 769 ){
    return false;
}
    $(".home .x-brand img").attr("src","//www.meetmyguide.com/wp-content/uploads/2016/06/lgog正確檔-白色-2.png");
});

I also went to Appereance Customizer Header and Change the hoover colors of your Navbar links to RED (You are not using ubermenu, so forget about that) If you want some other color just go there and change it.

Sorry I made the changes for you this time but took me a few times testing it yo make sure it would work.

If you have any questions you can compare the code provided before with what you have now and if you have any questions, please let us know.

Hope it helps,

Joao

[Chiweilin]

Hi Joao,

Thank you soo much. Everything works now. It’s perfect. Thank you and your team’s effort to help me do with these features. You guys are really patient and professional. And X theme support is the best I have ever experienced. Good job:)

Love,
Wei

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Chiweilin]

Hi Nico,

I still have a problem that I hope you guys can help me again:

Since the transparent header on the homepage and the white header on the rest of the pages are set, I found that my content on the very top of every page (desktop view, except homepage) is overlay by the white header. So the content on the very top can’t be seen. I didn’t keep mentioning it because I found a way to solve it myself, which is using Cornerstone to create a blank section appear if it’s viewed by desktop or laptop screen screen (so the blank section pushes my content downward, and therefore can be seen), and disappear if it’s viewed by mobile devices. It works perfectly well until I want to create a posts page from WordPress admin area > Setting > Reading > A static page > Posts page

Since WordPress does not allow me to edit the posts page by Cornerstone, the same problem occurs again (only for laptop or desktop view, it’s no problem for mobile devices) on my post page and I couldn’t figure out how to solve it anymore. Do you have any solution to avoid this? If you do, I can then remove all the blank sections on the very top of every page (except homepage) afterwards.

Again, appreciate your kind help.

Thanks,
Wei

[Rue Nel]

Hello Wei,

This last issue you have occurred because of the conflict in css. Please find this block:

@media(min-width: 980px){
  body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
  }

  .home .site .masthead .x-navbar {
      background-color: transparent;
      transition: all 0.5s linear;
  }

  .home .site .masthead .x-navbar.x-navbar-solid {
      background-color: #000;
      background-color: rgba(0,0,0,0.75);
    
  }
}

You need to update it and replace it with this:

@media(min-width: 980px){
  body.home.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
  }

  .home .site .masthead .x-navbar {
      background-color: transparent;
      transition: all 0.5s linear;
  }

  .home .site .masthead .x-navbar.x-navbar-solid {
      background-color: #000;
      background-color: rgba(0,0,0,0.75);
    
  }
}

Please let us know if this works out for you.

[Chiweilin]

Rue Nel,

Thanks, it works well. Appreciate it.

Wei

[Friech]

We’re delighted to assist you with this.

Cheers!

[Chiweilin]

Dear Support,

I need your help again for changing the color of the menu. As you helped me so much about the layout of my website for the previous questions, I don’t think I can fix the color right now since I am afraid to mess up all the CSS in Custom CSS area.

Here’s are the changes that I want to fix:

1. For homepage, I need the submenu to become this color (#388A66) instead of red when hover.

2. For the rest of the page, both top level menu and submenu to become this color (#388A66) instead of red when hover.

Thank you so much again for your great support, looking forward to hearing from you.

Wei

[Lely]

Hello Wei,

1.) and 2.) Please use the following custom CSS:

.x-nav > li > a:hover, .sub-menu a:hover {
    color: #388A66 !important;
}

Hope this helps.

[Chiweilin]

Hi Lely,

Thanks for the help.

But I still found the two problems that I hope you can help:

1) For homepage only, I don’t want to have this color #388A66 appear on the top level menu when hover. I need to have just white when hover.

2) For the rest of the page, for example at the about page, the top level menu (about tab) stays red. And if you click “Taroko National Park Classic” page, it’s the same situation that the sub-menu stays red. (like the two screenshots I attached here.)

I don’t want to have red appear anymore.

Thank you so much, appreciate your help.

[Christopher]

Hi there,

Please add this :

.home .x-nav > li > a:hover,.home .sub-menu a:hover{
color:#fff !important;
}
.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, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
    color: #388A66;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Chiweilin]

Thanks Christopher. Will open up in a separate thread next time for a new topic.

[Rue Nel]

You are most welcome!

[Author]

Posts