Static menu bar
Author: William J.
Visited 3035,
Followers 1,
Shared 0
Hi Is it possible to have a static menu bar at the top of a website? I know I can use the "sticky bar" option but I would like to just have a static menu always visible and when the page scrolls it dissapears under the menu.
cheers
Posted on the
Hello William
Yes - it is possible.
You can have sticky menus everywhere.
See some examples here : http://www.bramminginfo.dk/brm02/starten.html
And here : http://www.bramminginfo.dk/brm02/side-26.html
For the main-menu you could use some HTML.
You could use :
<style>
#imMnMn{position:fixed; top: 0px; height: 60px; width: 100%; z-index: 1000;}
</style>
You could use this on one page ( properties - expert )
Or You could use it on all pages ( statistics SEO and Code - expert )
This should make a sticky menu in full width. You can experiment with the styling.
Hope You are helped
Kind regards
John S.
Author
Hi John, unfortunately thats not working the way that I would like but that could be down to the way I have asked the question. I am using the sticky menu at the moment but I would like it to be always visable not scroll with the page and be replaced with a drop down version of the same thing. You can see what im trying to replecate in this website www.wilvac.com as you can see I have the menu static at the top of the page and everything scrolls under it.
cheers,
Hello William
I forgot that the menu now is an object.
You could try this instead. Maybe you have to adjust the names .
<style>
#imHeader_imCell_1 {position:fixed; top: 0px; left:0px; background:red; height: 100px; width: 100%; z-index: 1000;}
#imHeader_imMenuObject_01 {position:relative; top: 50px; left:400px; background:yellow;}
</style>
You have to make the styling fit your needs. You should beware of, what you have in your header.
If you want it on all pages, use the SEO/expert
Hope this was better. Please tell us, how/if it functioned.
Kind regards
John S.
I made an example for you here : http://www.bramminginfo.dk/brm04/index.html
Author
Hi John, Yes thats what i'm looking for. I will make adjustments to suit my needs. Once again you have managed to sort out my problem. Thanks for that.
william
Author
Sorry John things working ok as far as the bar is now static but I cannot seem to get the title centered. I have put a title into the template content and set it to size and centre but when viewed it is in the static bar ok but keeps defaulting it's position to the top left? otherwise it's what i'm looking for.
cheers
Author
also how did you get your menu bar to stay static as well? sorry for all the questions lol
Hello William
Give me a link to your site, and I will see what to do.
You don't need to publish it to its original place - you can create a subfolder and put it there.
Then - when you have all to function you can delete the subfolder, and publish the project to its original location.
The menu bar is static because it is in the cell_1 that I made fixed. And the menu bar is positioned relative to this.
This will also go for the text-object, I think. I need to see your site to be sure.
You can also put a background-image in your header.
If you give a link, I will try to tell you, what to do.
Kind regards
John
Author
Hi John, I can get the bar to remain static at the top of the page and also got the menu to stay static but still having problems with the Title. It scrolls with the page. I have attempted to add another line of code under yours and replaced "menueobject" with "titleobject" but it still scrolls with the page, I have uploaded the test site to http://www.theorbe.co.uk as you will see the title "my website"scrolls of the page.
thanks,
Hello William
I have updated my example : http://www.bramminginfo.dk/brm04/
The code used for this is :
<style>
#imHeader_imCell_1 {position:fixed; top: 0px; left:0px; background:red; height: 100px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm04/images/owl_1f989.png); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_01 {position:relative; top: 50px; left:400px; background:yellow;}
#imHeader_imObjectTitle_02 {position:fixed; top: 10px; left:200px; background:transparent;}
</style>
It is the line
#imHeader_imObjectTitle_02 {position:fixed; top: 10px; left:200px; background:transparent;}
That makes the title to be fixed.
As You can see, I have added a background image - just to show you if you want it.
You can also add an image as an object, and then you can place it where you want.
Beware that this way to make a fixed header/meny, will do no good for the responsive look - unless this is taken care of.
I will not go into this.
Hope you have it to function - tell us how it goes.
If this solves your problem, then mark this post as solved.
Else - tell what is the problem.
Kind regards
John S.
Author
Hi John, thanks for getting back so quick. Well it works but as you have pointed out it messes up the responsive side of things lol. Pity it would have solved my issue. Thanks for taking the time to help.
cheers,
Hello William
As I also wrote, there is a solution.
For every next breakpoint, you hide the objects already made, and make some new objects ( menu and title ).
These objects you add ( a new line) to the "styling". And set the positions for this breakpoint.
This way, you can still have it look nice in all breakpoints.
Kind regards
John S.
I have now removed my example
You could see an example of a fixed menu here : http://www.bramminginfo.dk/brm05/
This testproject I tried to make responsive, ( according to how I told you ) - and it seems to function.
Kind regards
John S.
Author
Hi John, thanks for all your help. I will work on the breakpoints, (never thought of that). Im sure with the help that you have given me I can work out a solution that will fit my needs.
thanks again
william
Author
Yes that will work for me John cheers
Hello William
Here are the 8 lines of "code" used in SEO/expert, for the new demo
<style>
#imHeader_imCell_1 {position:fixed; top: 0px; left:0px; background:black; height: 280px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm05/images/tradekam.jpg); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_01 {position:relative; top: 230px; left:100px; background:black; width: 1800px; z-index: 1000;}
#imHeader_imCell_2 {position:fixed; top: 0px; left:0px; background:black; height: 200px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm05/images/tradekam02.jpg); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_02 {position:relative; top: 135px; left:0px; background:black; width: 100%; z-index: 1000;}
#imHeader_imCell_4 {position:fixed; top: 0px; left:0px; background:black; height: 130px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm05/images/tradekam03.jpg); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_04 {position:relative; top: 90px; left:20px; background:yellow; width: 50px; z-index: 1000;}
#imHeader_imCell_5 {position:fixed; top: 0px; left:0px; background:black; height: 100px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm05/images/tradekam04.jpg); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_05 {position:relative; top: 60px; left:20px; background:yellow; width: 50px; z-index: 1000;}
</style>
You have to upload eventual background-images manually via FTP.
By the way - William it is a good thing, that you give feedback when someone helps you with a problem - and it is also a good thing that you mark the thread as "solved"
BUT
You should mark one of the posts that helps you, and this way give the person that helps you credit for this.
You could also give one or more of the helpful posts a "thumbs -up" if the post is helpful
It is not yourself you should credit for the solution - unless you are collecting points
Kind regards
John S.
Author
Cheers John. I was unaware that I was crediting myself lol (not good) I will in future credit whoever helps (as it should be).
I just thought that when I ticked as closed that that person automatically got the credit. Im not into collecting points, don't really care lol. All im intrested in is either getting a problem solved or helping to solve a problem for others which you have done for me on more than a few occasions.
Thanks for taking the time to sort the code for me much appreciated. I will try it out later.
Hello William
It was just because I could see some other posts, where you were helped by Andre and Esahc.
I think the meaning is, that others can see which posts adresses the problem and helps. If it helps - a thumbs up.
If it solves the problem - mark the post as the one that did it.
If someone searches the forum with a similar problem, then this user can see which posts helps about the problem and if a post is marked "solved" then the user can see that there is a solution to the problem described.
i hope you have your site to function - else - we are here to help you.