Skip to main content

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?

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!


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”. 


!s](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