Nav bar issues and styling

Support
#1

I’m building a new site on the App demo - thanks, by the way, it’s saving me a chunk of time!

Here is the site: https://imbali.storiesandscience.co.za/

I’m experiencing some issues with the nav bar, and I need your help with some styling changes, as follows:

  1. The nav bar width is correct on site load, but as soon as I start scrolling down, the nav bar jumps and extra space is added at the top.
  2. I want to have a transparent background for the nav bar on site load, and then ease in a solid white background when the user starts scrolling down.
  3. I have one-page navigation on the home page. All of the links show their active state - in other words, green and underlined - and I want these links to be gray (like Contact and Blog).

Have a super week!
Ian

#2

Hi There,

1- Could not replicate the issue, are you still experiecing it? On which browser and device you are experiencing the issue?

2- The given credentials are not working, but please try:

Add the following code to Theme Options > CSS

.x-navbar-wrap {
height: auto !important;
}

.x-navbar {
background-color:transparent;
border:0;
box-shadow:none;
position: fixed;
width:100%;
}

.x-navbar-solid {
background-color:white;
}

Add the following code to Theme Options JS

jQuery(function($) {
$(window).scroll(function(){
if($(window).scrollTop() >50) {
$(’.x-navbar’).addClass(“x-navbar-solid”);
}else {
$(’.x-navbar’).removeClass(“x-navbar-solid”);
}
});
});

If that does not work, please provide working login credentials.

3- As you have a mixed menu, you need to create two different menus on Appereance > Menus.

One,as you have it, with the absolute links :slight_smile:

https://imbali.storiesandscience.co.za/#what-we-do

And other with relative links as just :

#what-we-do

This second menu that you will create will be the menu that you will assign as your One Page Navigation Menu.

Hope it helps!

#3

Hi Joao,

Thanks for your help! I’ve updated the login details in the secure note and tested it - you should have access now.

  1. Yes, the issue still persists. Using Chrome on MacOS.
  2. This is working. I would like the solid white background to ease in - how do I achieve that?
  3. This is working 100% - thanks!
#4

Hi,

For no. 1 Add this in Custom > CSS

.home .x-navbar {
   position:fixed;
   width:100%;
   top:0;
}

For no. 2 Add this in Custom > CSS

.x-navbar-solid {
    transition: background-color 0.5s ease;
    background-color: white !important;
}

Hope that helps.

#5

Success! Thanks for the team effort, Paul and Joao.

#6

Great I am glad you figured it out.