Fixed navigation bar but not on the top

  • 14 December 2015
  • 4 replies
  • 2 views

Hi, I am trying to make a fixed navigation bar, but I don’t want it stick to the top of the page. Instead, I would like to have some spaces from the edge of the page.
Here is the figure that I want to make:

![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1328548/RackMultipart20151214-27661-1weokwe- _____ 2015-12-14_18.07.24_inline.png?1450087670 “Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1328548/RackMultipart20151214-27661-1weokwe-_____2015-12-14_18.07.24_inline.png?1450087670”)

I’ve tried several times to code by myself, but unfortunately I have no sense of coding…
Can anyone help me resolve the problem?


4 replies

Userlevel 7
Badge +3

Hi Chialin, 

Have you tried the script from this thread: /topics/creating_a_fixed_header_menu

I just put together a quick example for you here: http://unbouncepages.com/fixed-nav-example/

You just have to adjust the box number, width and the left position. 

Hope this points you in the right direction.

Best,
Hristian

Hello Hristian,

Thanks for your sharing. I did adjust the script you gave for me before, but somehow it just could not become what I wanted.

When I changed the width and the left position, it turned out the navigation bar was not centered-align. I did not know why.

Still thank you for replying me!

Userlevel 7
Badge +3

Hi Chialin, 

It should work but make sure you set the box width to be the same as your page width. 

Then adjust accordingly in the javascript. 

Also, set “left”:“auto” in all 3 instances in the script. 

That’s how I put together the example above and the nav bar is centered. 

Last but not least, make sure you’ve checked the “Stretch background to page edges”. 

![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1328563/RackMultipart20151214-18737-25xbnz-Edit A - fixed-nav-example inline.png?1450090901 “Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1328563/RackMultipart20151214-18737-25xbnz-Edit__A__-__fixed-nav-example__inline.png?1450090901”)

If it still doesn’t work, make sure to drop a support ticket to the Unbounce team, they can go in and take a look at your particular page. 

Best,
Hristian

thank for information, it will be solved my problem

thanks

Reply