How to fix navigation bar at top of page |
Post Reply |
Author | |
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
Posted: Jul 23 2021 at 7:56pm |
Hi, I would like to know how to fix the navigation/menu bar at top of the page so that it remains at the top when users scroll down the page. I watched OE tutorial on responsive menu (https://forum.openelement.com/en/forum_posts.asp?TID=1756&title=tutorial-create-your-own-responsive-menu) and followed it by creating a layer page with a group of elements container placed at the top. This container is my navigation/menu bar. I also gave it a Custom Class MenuBar and added CSS code provided on the above link: .MenuBar{ z-index:30000 !important; position: fixed !important; } I link a page to this layer and the menu bar just scrolls off the top of the page. What other settings do I need to have to get this menu bar to stay at the top. Thank you. |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Post Options
Thanks(0)
|
Create a back-up of your project and send it to me via Wetransfer.com send me the link trough my contact form on denislafrance.net
Once I get it I will see what went wrong
Edited by Hobby001 - Jul 26 2021 at 3:16am |
|
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
I created a new project that should replicate what I had earlier in experimenting this menu bar positioning. I will send it to you via Wetransfer once I have received proper detail as it asks for. Thanks.
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Post Options
Thanks(0)
|
I just found what hapenned, I will produce a tutorial to fix that today or tomorrow
|
|
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
That sounds great. I look forward to that. Thanks.
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Post Options
Thanks(0)
|
Meanwhile you can open your base layer and activate the top section. Give it your menu height wile leaving it in absolut mode
Open your menu layer and drag your menu into the top section Save and refresh everything and it should work fine
|
|
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
I will try that as I am quite curious about various sections within a page (top, left, right). This relates a page that I am having a difficult time styling it without such sections, with my OE know-how's. I am not a Web design expert (very far from that) but have read that for compatibility with various browsers, avoid using 'frames' (as they will stop supporting frame). Use CSS instead for styling as frames. I assume those sections are CSS-styled frames. Is this correct?. |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Post Options
Thanks(0)
|
Tese are simply div named sections to ease understanding
There is no frame in OE but some iframe that keep being supported by browsers
|
|
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
After a few attempts, I managed to get it working by checking off the Header section as you suggested. I set it to Absolute with same height as my menu bar and moved the menu bar into it. The above CSS code to fix the position is still needed for the header section. I think this approach is more intuitive than the one before. Thanks.
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Post Options
Thanks(0)
|
That's what I meant saying activate. It would have been better to say add a check to activate the section
My english is not perfect
|
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |