WebSite X5Help Center

 
Michael S.
Michael S.
User

How To Make Full Screen Sticky Menu Bar  en

Auteur : Michael S.
Visité 4754, Followers 4, Partagé 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

Posté le
41 RéPONSES - 3 UTILE - 1 CORRECT
Michael S.
Michael S.
User
Auteur

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.

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

Thank you so very much Jamie

Much love and appreciation.

Lire plus
Posté le de Michael S.
Aleksey K.
Aleksey K.
User

Jamie big thanks for tutorial!

Lire plus
Posté le de Aleksey K.
Jamie B.
Jamie B.
User

Hi

No probs hope its useful to you all, the tutorial works ffrom v9 to v12 both for evo and pro versions.

regards

jamie

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

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

Lire plus
Posté le de Michael S.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

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

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

thank you jamie

Lire plus
Posté le de Michael S.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

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

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

Please disregard Jamie

Got it to work, it was not tranparent

Thanks again

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

After adding the sticky script the links do not work on the pages.

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

Jamie seems to do with the content padding in the script, it is blocking the content

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

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

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

See getting no answers

Any help will do

Thank you

Lire plus
Posté le de Michael S.
Incomedia
Claudio D.
Incomedia

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!

Lire plus
Posté le de Claudio D.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

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.

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

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

Lire plus
Posté le de Michael S.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

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

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

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

Lire plus
Posté le de Michael S.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

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.

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

Sent you the files Jamie

Thanks again

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

Hi Jamie

Got it thanks again, all working fine but the content on the page is being blocked.

Lire plus
Posté le de Michael S.
Michael S.
Michael S.
User
Auteur

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.

Lire plus
Posté le de Michael S.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

Thank you very much Jamie

Really appreciate your help.

Lire plus
Posté le de Michael S.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Jamie B.
Jamie B.
User

files have been sent to you.

jamie

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

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

Lire plus
Posté le de Michael S.
Jamie B.
Jamie B.
User

Replied to you via email michael

regards

Jamie

Lire plus
Posté le de Jamie B.
Michael S.
Michael S.
User
Auteur

Got it and understand, really sorry had you working so hard.

My thanks again, you are the best.

Lire plus
Posté le de Michael S.