Docs

[Jade]

HI there,

I checked your site but I can’t seem to replicate the issue since the navbar remains on the top of the page even when I scroll it. Does the issue happen in some specific pages? If so, kindly direct us to the page so that we could check it.

Thank you.

[richermusic]

Is there any way of removing the lines that also come down from the top of the screen towards the nav bar. They are currently used to seperate the words but I dont really want them.

[Jade]

HI there,

To get rid of the separator, please add this code in the customizer:

.x-navbar .desktop .x-nav>li:first-child>a, 
.x-navbar .desktop .x-nav>li>a {
    border: 0;
}

Hope this helps.

[richermusic]

Hi Jade

I have tried both on my mac and on my PC – the nav bar still scrolls on both the home page as well as every other page.

I also have a problem that although its white on my home page and therefore visible over the video…its not visible on any other page and it now means that content goes behind the nav bar on other pages – for example http://www.richermusic.co.uk/act-signup

How can i rectify this? Is there perhaps a way of having the nav bar see through on the home page but normal on all the other pages?

Sorry for all the questions! You guys are fantastic and its been so useful!

[Joao]

Hi There,

I have updated your CSS and JS code and now you have a tranaprent navbar at the home page that changes color when scrolling, a solid black bar on the inner pages, also I adjusts so the line above your navbar links looks better.

Hope that helps

Joao

[richermusic]

Hi

My header is now causing me problems because its not easily read over the top of my image on my website (www.richermusic.co.uk). Is there anyway of making the header background slightly darker, not fully black, but just darker and transparent.

I am also having problems that when I check it on a mobile – the drop down menu and logo are not really visible and therefore I am worried people will not be able to click on the menu option. Would this be rectified if we made the normal head background darker?

[Joao]

Hi There,

1- Please upda your code from Appereance > customizer > Custom > Javascript to:

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0.35)");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0.35)").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 fix on mobile please add to Appereance > Customizer > Custom > CSS:

@media (max-width: 979px) {
.admin-bar .x-navbar-fixed-top, .admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
    top: 0;
    background: black !important;
}
}

Hope that helps

Joao

[richermusic]

Hi Joao

This has only fixed the problem when you scroll down. It has not fixed the problem when the site simply loads straight away.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (min-width: 980px) {
.home .x-navbar {
   background:rgba(0, 0, 0, 0.34902);
}
}

Hope that helps.

[richermusic]

That has worked perfectly. However, now, with regards to sub menu items, when I hover over the main menu item “Entertainers”, the sub menu shows up over the top of the main menu wording.

How do i get it so that the menu drops down instead of over the top?

[Joao]

Hi There

I am glad you are happy with the results so far,

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

.masthead-inline .x-navbar .desktop .sub-menu {
    margin-top: 50px;
    background-color: rgba(0,0,0,0.3);
}

Adjust 0.3 to adjust the opacity.

Hope that helps

Joao

[Author]

Posts