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

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - FIXED HEADER
  FAQ FAQ  Forum Search   Register Register  Login Login

FIXED HEADER

 Post Reply Post Reply Page  12>
Author
Message
deewebdev View Drop Down
Groupie
Groupie
Avatar

Joined: 29 Mar 2019
Status: Offline
Points: 70
Post Options Post Options   Thanks (0) Thanks(0)   Quote deewebdev Quote  Post ReplyReply Direct Link To This Post Topic: FIXED HEADER
    Posted: 05 Mai 2019 at 08:49
Dear OE staff:

I want to freeze the header and navigational bar menu that I have
created underneath the header with its respective popup menus so
that when the user scrolls down the webpage, the header and navbar
stay put.

I have tried putting the above into a group of elements container and
I have also activated the header section of the document however, there
seems to be no way for me to tell these elements to stay fixed!

Please help.
Thank you
Dwight
Dwight
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada QC
Status: Offline
Points: 4145
Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 06 Mai 2019 at 04:26
Don't put your menu bar in the page header.  Dont activate the header anyway.

Your menu bar must be included in a group of elements and on the top of a layer.

Give the group of elements a css class. Let's say menuBar.

Then add the following css code:

.menuBar{
z-index:9999;
position fixed !important;
}




 


Edited by Hobby001 - 06 Mai 2019 at 04:27
Back to Top
deewebdev View Drop Down
Groupie
Groupie
Avatar

Joined: 29 Mar 2019
Status: Offline
Points: 70
Post Options Post Options   Thanks (0) Thanks(0)   Quote deewebdev Quote  Post ReplyReply Direct Link To This Post Posted: 06 Mai 2019 at 06:07
Hello Hobby001:

Thanks for your reply.

I may be a little confused as to how to go about putting the group
of elements on the top most layer but I will do what you say.

I will put the menu bar in a group of elements and then add the CSS
class like you specified and hope it works.

Either way, I will get back with you if it does or does not work.

Thanks again so much for your help!

Sincerely,
deewebdev
Dwight
Back to Top
deewebdev View Drop Down
Groupie
Groupie
Avatar

Joined: 29 Mar 2019
Status: Offline
Points: 70
Post Options Post Options   Thanks (0) Thanks(0)   Quote deewebdev Quote  Post ReplyReply Direct Link To This Post Posted: 06 Mai 2019 at 08:34
Dear Hobby001:

I did everything you suggested in your reply.

I created a layer, then a group of elements and put
the menubar in this group of elements.

I then created a CSS class named menuBar and copied
the code you provided in the source code (add code block).

Nothing seems to be working and I am sure I am doing something
wrong.

If you can so kindly provide the steps in order for me to do this, I
would so greatly appreciate it as this is something my client specifically
wants the website to do.

I know that openElement most probably supports parallex but I am
more comfortable with your solution.  But I am surely missing a step
or going about it the wrong way.

Again, any help would be greatly appreciated.

Thank you.
deewebdev
Dwight
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada QC
Status: Offline
Points: 4145
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 06 Mai 2019 at 12:38
Hi,

Please provide a link to your site
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada QC
Status: Offline
Points: 4145
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 06 Mai 2019 at 13:25
Try with this one:

.menuBar{
z-index:9999 !important;
position fixed !important;
}

It works fine for me


Back to Top
deewebdev View Drop Down
Groupie
Groupie
Avatar

Joined: 29 Mar 2019
Status: Offline
Points: 70
Post Options Post Options   Thanks (0) Thanks(0)   Quote deewebdev Quote  Post ReplyReply Direct Link To This Post Posted: 07 Mai 2019 at 01:40
Hello Hobby001:

Finally got it!

I wasn't putting these elements in a separate layer.

Created the layer and moved the elements into that layer, now
it works.

The only issue is now that the body (lettering of content that scrolls
upward, scrolls over the menubar and not behind it. For example, when
the letters scroll upward and reach the menubar, I am hoping that they
disappear.

But the lettering seems to be over the menubar and creates a clash.

I hope you know what I mean. Do I have to specify behind or in front of,
for these elements?

Thanks for all of your help.
Dwight
Dwight
Back to Top
deewebdev View Drop Down
Groupie
Groupie
Avatar

Joined: 29 Mar 2019
Status: Offline
Points: 70
Post Options Post Options   Thanks (0) Thanks(0)   Quote deewebdev Quote  Post ReplyReply Direct Link To This Post Posted: 07 Mai 2019 at 01:42
Dear Hobby001:

My email is deedeedwight@gmail.com.

If you send me an email, I can upload my work so that you can
see what I mean.

Thank you
deewebdev
Dwight
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada QC
Status: Offline
Points: 4145
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 07 Mai 2019 at 03:15
I just sent it to you
Back to Top
deewebdev View Drop Down
Groupie
Groupie
Avatar

Joined: 29 Mar 2019
Status: Offline
Points: 70
Post Options Post Options   Thanks (0) Thanks(0)   Quote deewebdev Quote  Post ReplyReply Direct Link To This Post Posted: 07 Mai 2019 at 06:47
Hello Hobby001":

Sorry for not replying right away.

I finally got it to work, a bit complex though.

I created a new layer, put all of the top header
elements in a group of elements box.

I then inserted both a CSS code block and an
HTML code block on the main page.

I then Centered the header (which became left
justified when I executed the page and that worked
as well.

Now it scrolls beautifully exactly where I want it to.

Thank you for your advice and code which I would say
is about 80% of the solution right there.

I will reply to your email with 1 more issue I have before
I actually finish this site and that is, each page has different
content in the middle. So with each different page the content
changes, but the left margin, top margin and right margins along
with footer stay the same.

I thought of using a base layer to maintain the left, right, top and
footer the same and have only the middle change according to each
page.

It seems though that the base layer changes everything and defeats
the above purpose.

How can I create a base layer for only the left, right, top and bottom
sections only so that if anything were edited in the base layer, it would
automatically be updated in every page without it affecting the contents
in the middle of each page.

I will be sending an example to your email.

Thank you nonetheless for all of your help.
deewebdev
Dwight
Back to Top
 Post Reply Post Reply Page  12>
  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,033 seconds.