Docs

[Eyoael]

Hi,

i want to make my navbar look like the following website https://thecuratedtravel.com/. i have tried the different solutions posted in the forum but can’t get it right. How can i achieve this?

Best Regards
Eyoael

[Darshana]

Hi there,

Thanks for writing in! To assist you with this request, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Eyoael]

Hi,

My url is http://www.hopeochlaila.se, the site is not not live i hope that won’t be a problem. Btw the x-theme is the best theme that i have ever used :).

Best regards
Eyoael Michael

[Rupok]

Hi Eyoael,

You need to see your current setup to offer you a tailored code. As you have under construction mode set for your site, we can’t check the site.

However meantime you can try this solution.

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 > 300) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

Then add this under Custom > CSS in the Customizer.

.x-navbar {
  background-color: transparent!important;
}

.x-navbar.alt-color {
  background-color: #fff!important;
}

It should work fine but still if that doesn’t work for you, let’s take off the under construction mode or provide us the credentials in a private reply.

Hope this helps.

[Eyoael]

This reply has been marked as private.

[Paul R]

Hi Eyoael,

The login provided doesn’t seem to work.

Kindly check again and let us know.

Thanks

[Eyoael]

This reply has been marked as private.

[Joao]

Hi There,

Let´s use this solution instead :

On your Appereance > Customizer > Custom > CSS add:

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

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}
@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

Than add the following code to Appereance > customizer > 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');
   }
    
  });
});

Hope it helps

Joao

[Eyoael]

Hi joao,

Thanks for your reply. The code that you have provided me with is has almost done it but now when i scroll down there is no white box accompanying the nav bar menus and logotext. If you look at the page thecuratedtravel.com that i was referencing to my nav bar doesn’t look and behave the same. Maybe you can somehow tweak the code that you have provided med with so that i can look and act the same?

Best regards
Eyoael

[Eyoael]

Hi,

The problem that i’m having is when i scroll down the navbar because it is transparent disappears behind the rest of the page.

Thanks

[Joao]

Hi There,

I have update your CSS to :

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

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}
@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

.x-brand.text.black-text {
color: #272727 !important; 
}

And your Javascript to:

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');
   }
    
      if ($(this).scrollTop() > 100) {
     $('.x-brand.text').addClass('black-text');
   } else {
     $('.x-brand.text').removeClass('black-text');
   }
    
    
  });
});

Both changes were made at Appereance > Customizer > Custom

I have saved the changes, it looks pretty good, let us know if you need further help,

Joao

[Eyoael]

Hi joao,

Thank u thank u thank u. U guys are awesome! Could you help me with the footer section as well to make it look like the fotter section of the the same webpage that i referenced to? I have tried to fix it my self without much success.

Best regards
Eyoael

[Joao]

Please add the following code to Appereance > customizer > Custom > CSS

.x-colophon {
    padding-top: 4% !important;
    padding-bottom: 4% !important;
}

if you want to get a similar effect you need a contrast between the footer and the section above, I reccomend you using a background picture on the section above or a solid color, and change the code to:

.x-colophon {
     border-top: 0px;
     box-shadow:none; 
     padding-top: 4% !important;
     padding-bottom: 4% !important;
}

Hope that helps

Joao

[Eyoael]

Hi,
Thanks i will try it out. And thank you again for all your help.

Best Regards
Eyoael

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts