BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
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: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
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: 23 Juil 2021 at 20:56
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 26 Juil 2021 at 04:10
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 - 26 Juil 2021 at 04:16
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 26 Juil 2021 at 07:29
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 26 Juil 2021 at 17:24
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: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 26 Juil 2021 at 17:50
That sounds great. I look forward to that. Thanks.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 26 Juil 2021 at 18:01
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: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 26 Juil 2021 at 19:06
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 26 Juil 2021 at 19:12
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: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 27 Juil 2021 at 06:01
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 28 Juil 2021 at 03:13
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 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.