How To Make Full Screen Sticky Menu Bar
Autor: Michael S.
Visitado 4677,
Followers 4,
Compartido 0
Hello
I am trying to redo my site in x5 12 which has a sticky menu bar at the top with a background that is filling the full screen. You can view here: www.sluhosting.com
Is this possible in x5?
Thank you
Publicado en
Hi
are you on about something like this https://www.x5tuts.com/template/composite-v10/colour4/ its quite easy but requires adding some custom code to your project file Have alook throught the tutorials on https://www.x5tuts.com i'm pretty sure theres a tutorial on our site somewhere about sticky menus
regards
jamie
Hi
Sorry wrong demo you can view the demo for v12 here https://www.x5tuts.com/downloads/composite-v12-pro/
regards
jamie
Autor
Thanks Jamie
Yes that is exactly what I want to do, stick it at the top as you go down the page. I checked x5tuts.com but not seeing any scripts or tutorials to do this.
Can you tell me how to do and add the code.
Thanks again in advance.
Hi Michael
Here you go https://www.x5tuts.com/sticky-header-footer-in-website-x5/
regards
jamie
Autor
Thank you so very much Jamie
Much love and appreciation.
Jamie big thanks for tutorial!
Hi
No probs hope its useful to you all, the tutorial works ffrom v9 to v12 both for evo and pro versions.
regards
jamie
Autor
Jamie
Can I ask what slider you are using on the Composite template as I see the text and buttons change.
Thank you very much
The slider used in composite v12 was flexislider but you can use it with other sliders, I've tested it with apex slider, layered slider and Revolution slider.
regards
jamie
Autor
Purchased composite to see how you do things, hope that is fine.
See you use a lot of scripts to do the site. I tried using wow slider but it pushes my menu bar down, see here: http://www.dfhkayaking.com/test/
Are you using a script for the header?
Thank you
Hi
Please follow this tutorial to get your header at the top of the page https://www.x5tuts.com/sticky-header-footer-in-website-x5/
regards
jamie
Autor
thank you jamie
Hi
no probs just remember to only use the bit of code you need, so if you want the header to stay at the top only use the code for the header but test it out and see what fits for your needs.
regards
jamie
Autor
Jamie
Got the header to stick but the contents background is over the header, I believe because of the padding for the contents, how do I get it to the correct position.
Sorry for the ask, you can see it here: http://www.dfhkayaking.com/test/
Thank you in advance
Autor
Please disregard Jamie
Got it to work, it was not tranparent
Thanks again
Autor
After adding the sticky script the links do not work on the pages.
Autor
See here: http://www.dfhkayaking.com
Autor
Jamie seems to do with the content padding in the script, it is blocking the content
Autor
Had to go back to the orginal as the padding was affecting the site but hope I can get help on the padding so it does not affect the text. I have placed on the test site here:
http://www.dfhkayaking.com/test/
Thank you
Autor
See getting no answers
Any help will do
Thank you
Hello Michael,
Unfortunately I cannot help you with custom HTML code since the support is only available to the functions in the program and you will need to wait to get an answer from someone of the community.
Many thanks!
Hi michael
sorry about the delay, have you managed to get it working correctly yet if not please let me know the issues so I can help you better.
regards
jamie
Autor
Thanks for getting back Jamie
I am still struggling a bit, I am trying to put the wow slider at the top but it is overlapping the content page.
Really appreciate any help you can give me.
Autor
Here is what I have as the code:
<style type="text/css">
#imHeaderBg {position:fixed; z-index: 50;}
#imHeader {position: fixed; top: 82px; width: 960px; z-index: 50;}
#imMnMn{position:fixed; top: 0px; left:auto; z-index:50; }
#wowslider-container0 {position: absolute; top: 82px; width: 90%; z-index: 1000;}
</style>
The menu is sticky but the wow slider goes over it and you can click any links on the page as I believe there is a background blocking it.
See a test here: http://www.dfhkayaking.com/test/index.html
Hi michael
this is because you have the z-index of the wow slider higher than the header section, lower the z-index of the wow slider to 40 and see if that works, or increase the z-index of the header.
regards
Jamie
Autor
Thanks for the help Jamie
This is what I have now but still under the slider:
<style type="text/css">
#imHeaderBg {position:fixed; z-index: 50;}
#imHeader {position: fixed; top: 82px; width: 960px; z-index: 100;}
#imMnMn{position:fixed; top: 0px; left:auto; z-index:50; }
#wowslider-container0 {position: absolute; top: 82px; width: 100%; z-index: 40;}
</style>
See a test here: http://www.dfhkayaking.com/test/index.html
Autor
Also the links on the page are being blocked, if you go down the page you cannot click the lins unless you bring the links near the bottom so something is blocking them
Thanks again
Hi michael
keep imHeaderBg z-index the same as imHeader that should fix the problem if not keep increasing the z-inder of the header and header background, it should work, if you need assistance you can send me the project file to info at x5tuts dot com and i will have alook at the problems and fix them for you.
regards
jamie
Hi michael
after just having alook at the test site the style sheet for wow slider has z-index at 90 soincrease header and header background to 500 and see if this works out for you
I am more than happy to take a closerlookif the problems persist.
regards
jamie
Autor
Hi Jamie
Really appreciate what you are doing for me.
Prefer if you look at my file, I am sending you the project and wow slider files to x5tuts with a dropbox link.
Thanks again.
Autor
Sent you the files Jamie
Thanks again
Autor
Hi Jamie
Got it thanks again, all working fine but the content on the page is being blocked.
Autor
Jamie
I figured it out, the reason I could not use the links on the content section is because of the header size in the template, it is blocking the content on the page.
Is there a workaround as the only way it works is if the header is 0.
Thank you again, really appreciate the help.
Autor
Here is what I tried on the page as I have a 0 header but it is stretching the header so not fitting properly
http://www.dfhkayaking.com/test/st-lucia-kayak-tours.html
Any ideas
Thank you
Hi michael
i will have a play around with the file you sent me and I'll get back to you as soon as I can.
regards
jamie
Autor
Thank you very much Jamie
Really appreciate your help.
Hi michael
I've fixed the issue on the template i have here, my mistake I forgat to add 2 scripts from the wow slider but its fixed now uploading to dropbox now for you i'll send you an email shortly, everything else seems to work fine.
regards
jamie
files have been sent to you.
jamie
Autor
Hi Jamie
Works perfectly, can I ask what you did?
I see important tags but can you explain, please. Especialy on the home page.
Do not know how to thank you, but only by saying thank you
Replied to you via email michael
regards
Jamie
Autor
Got it and understand, really sorry had you working so hard.
My thanks again, you are the best.