Docs

[Chiweilin]

Hi,

I’d like to make my header (navigation and logo) transparent and on my slider on the homepage. Please let me know how to do it.

Here’s my site: http://www.meetmyguide.com

Appreciate your help.

Thanks,
Wei

[Rue Nel]

Hello Wei,

Thanks for writing in!

To make your header transparentna donly in your homepage, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

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

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

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

And then go to the settings tab, Settings > Custom JS and insert the following custom js code

jQuery(function($) {

  var $body   = $('body');
  var $navbar = $('.x-navbar');

  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {

    $(window).scroll(function() {

      if ( $(this).scrollTop() >= 350 ) {
        $navbar.addClass('x-navbar-solid');
      } else {
        $navbar.removeClass('x-navbar-solid');
      }

    });

  }

});

The result should be like this:
http://prntscr.com/bfqkve
http://prntscr.com/bfql0k

Hope this helps.

[Chiweilin]

Hi Rue,

Thanks for your prompt reply. It works well. However, I still have few more problems with regard to this change.

<On homepage>

1. There is still a thin line on the bottom edge of the header. It’s not obvious, but I will need to remove it

2. I want to make the background stay transparent until it passes the point where the slider revolution and the first element (light grey area) meet. But now the background turns dark once it passes the tile “Zhuilu Old Trail” on slider revolution. Can you kindly help me adjust it?

3. And I want to make the background of the header the color like #333333 without any transparency once it passes where the slider revolution and the first element (light grey area) meet.

4. Can you help me make the font color of sub-menu #333333? I will need the menu stay lighter color like what I have now in order to stand out from the background, but I need the sub-menu a different color. It seems that I can’t customise in the customise area of X Theme. Now the font color of the sub-menu doesn’t stand out (see attachment)

5. For the rest of the pages, I want to have normal header without transparent background (color: #333333).

Hopefully these problems can be solved by your help. Really appreciate your effort to make X Theme community better and better.

Sincerely,
Wei

[Chiweilin]

Sorry, I forgot to list one more problem:

It seems that this transparency change is not responsive, it becomes the same when it’s viewed by mobile devices. Can you help on this? Thank you and appreciate it.

[Lely]

Hi Wel,

1.) Please add this CSS to remove bottom border:

.x-navbar {
    border-bottom: transparent;
}

2.) From the javascript code suggested above, please check this line of code:
if ( $(this).scrollTop() >= 350 ) {
Adjust 350 accordingly.

3.) Update this CSS:

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

To this:

  .site .masthead .x-navbar.x-navbar-solid {
      background-color: #000;
      background-color: #333333;
  }

4.)

navbar .desktop .sub-menu a,
navbar .desktop .sub-menu a:hover{
    color: #333333;
}

5.) Please update above Javscript code to this:

jQuery(function($) {

  var $body   = $('body');
  var $navbar = $('.x-navbar');

  if ( $body.hasClass('x-navbar-fixed-top-active') && $body.hasClass('home') && $navbar.length > 0 ) {

    $(window).scroll(function() {

      if ( $(this).scrollTop() >= 350 ) {
        $navbar.addClass('x-navbar-solid');
      } else {
        $navbar.removeClass('x-navbar-solid');
      }

    });

  }

});

Then update this:

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

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

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

To this:

@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);
  }
}

Also add this just above that CSS block:

.x-navbar {
    background-color: #333333;
}

6.) By default, fixed navbar is disabled on mobile view because of limited screen width/height.

Hope this helps.

[Chiweilin]

Hi Lely,

Thanks for the help. I have update all the code in CSS and JavaScript. I also changed the header background color as white.

1. However, the background doesn’t come out when I scroll down. It stays as transparent.

2. For homepage, because I want to make the background of the header as white when it comes out when I scroll down, do you think if it’s possible to make the main-menu font color stay white when it’s not scroll down (so it stands out from the darker slider) and turns black exactly when the white header background comes out when scrolled down?

3. Right now, the logo design is confirmed on my website. But what you see now is not the logo with transparent background. I will make the logo without background soon. What I want to do is I want to upload my white version logo on the homepage when it’s not scrolled down (so it stands out from the darker slider). When it scrolled down the white header comes out, do you think if it’s possible to make my logo a black version? Because if it stays as white version, people can’t see it from a white header background. But for the rest of the page, I just want to have a white header background with my black version logo. What should I do?

4. The font color of sub-menu couldn’t be changed by the CSS you gave me. (I made the main-menu color as white in the customize area). Therefore the sub-menus are blended in white background, which is not good 🙁

5. And there’s a problem on the rest of the pages that the header overlays the contents on the upper page. Therefore some of the contents are missing.

I have attached the CSS and Javascrip code in my X theme. Appreciate it if you could take a look and correct.

Sorry for the these complicated questions. I hope you can understand what I mean. And I really really appreciate the support made by you guys. I will buy more X theme for my other business website. Looking forward to hearing from you.

Sincerely,
Wei

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Chiweilin]

This reply has been marked as private.

[Chiweilin]

This reply has been marked as private.

[Joao]

Hi,

We will show you, but it is good to have access so we can test it before providing you the solution.

Thanks,

Joao

[Chiweilin]

This reply has been marked as private.

[John Ezra]

Hi Wei,

Thanks for updating the thread! Our standard process is always to guide our users on how to achieve their requests. It’s rare for us to actually go in and fix things as if something goes wrong, we don’t have all access and may not be able to revert any changes. We do however, check possible causes for issues while logged in.

Also before anything else, please do backup your site prior to passing us login credentials. It is best practice and is a user responsibility. There are possibilities of things going wrong beyond our control and we can’t be held responsible for such things. It’s best to be on the safe side despite it being very rare for our team to attempt something that will cause issues. Like I mentioned before, it’s rare for us to actually do the fixing, we identify the issues and then provide the user with instructions.

Hope this clarifies – thanks!

[Chiweilin]

This reply has been marked as private.

[Chiweilin]

This reply has been marked as private.

[Chiweilin]

This reply has been marked as private.

[Author]

Posts