BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - How to fix navigation bar at top of page
  FAQ FAQ  Forum Search   Register Register  Login Login

How to fix navigation bar at top of page

 Post Reply Post Reply
Author
Message
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Topic: How to fix navigation bar at top of page
    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.

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 26 2021 at 3:10am
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
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 26 2021 at 6:29am
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.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 26 2021 at 4:24pm
I just found what hapenned, I will produce a tutorial to fix that today or tomorrow
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 26 2021 at 4:50pm
That sounds great. I look forward to that. Thanks.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 26 2021 at 5:01pm
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
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 26 2021 at 6:06pm
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?.

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 26 2021 at 6:12pm
Tese are simply div named sections to ease understanding

There is no frame in OE but some iframe that keep being supported by browsers
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 27 2021 at 5:01am
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.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 28 2021 at 2:13am
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
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.078 seconds.