Styling of navigation bar is giving some problems :)

Support
#1

Hi there,

I’m having some problems getting the navigation bar to work as intended. I’ve tried to simplify the CSS as much as possible, but something is causing the nav bar to jump when I start scrolling. I’d also like some advice about whether I’m missing some controls in the Options panel that could do what I’m trying to do with the CSS.

This is the website: https://imbali.storiesandscience.co.za

This is my CSS:

/* Set background color and box shadow */
.x-navbar {
background-color: rgb(255, 255, 255) !important;
border:0;
box-shadow:none;
}

/* Reduce the space at the top of the header */
.x-container.max {
margin-top: -30px;
}

/* Add a bit of space below the logo at the bottom */
.x-navbar-inner {
padding-bottom: 18px;
}

Login details supplied in secure note, in case you need it :slight_smile:

#2

I thought I’d look at your site. It works perfectly when scrolling for me, no jumps whatsoever. Maybe something local your end?

#3

Hi there,

Thanks for writing in.

I have tried to check your site and I can’t seem to replicate the issue as well. Please try to clear your cache and see if it fixes the issue.

#4

Hi there,

Thanks for checking on this issue. I had set a negative margin on .x-navbar-inner, and when I scrolled down it caused the content below the navbar to jump. Fixed now :slight_smile:

Something else that I’ve picked up now is that the navbar overlaps with content below it. If you inspect the elements in Google Chrome, you will see there is an overlap. How do I remove this?

#5

Hi There,

Please add the following code to Theme Options CSS

.masthead {
height: 143px;
}

Hope it helps!

#6

Thanks! All set.

#7

Glad we could help.

Cheers!