Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
Why does my Habitu navigation bar jump on scroll?

Why does my Habitu navigation bar jump on scroll?

The jumps you see is caused by when the navigation changes to sticky on scroll. To make changing background simple, we make all the background an image. So you can just change the image file to change the background, and don’t need to touch any codes. To remove the “jump”, the background have to be a color code rather than an image. If you don’t mine dealing with a bit of codes to change the navigation bar, you can remove the jump.

1) Click into “design” and into “edit html/css”

2) Click on “main_style.css” to open the css editing page

3) Here locate this code:

.main-navigation {
height: auto;
background: url('navbg.jpg') repeat;
text-align: center;
width: 100%;
box-shadow: 0 0 4px rgba(0,0,0,0.25);
}

4) Here change the highlighted code above to rgba(255,255,255,0.6) so the code will look like this:

.main-navigation {
height: auto;
background: rgba(255,255,255,0.6);
text-align: center;
width: 100%;
box-shadow: 0 0 4px rgba(0,0,0,0.25);
}

Here you have change the background to a RGB color code. To change the menu bar background color, you can change the default 255,255,255 to another RGB color code. The LAST number rgba(255,255,255,0.6) defines the opacity of the background. Zero being completely transparent and 1 being completely solid. You can chose any number between 0 to 1 to control how transparent you want to make your navigation bar to be.

5) Save your change and publish your site

Tags: