Moving Menu To Top Using CSS for 2.0

[Hj Ahmad Rasyid Hj Ismail]

Hiya all again,

I am writing this tip or trick as there is someone there asking for one. It it not really simple but not too difficult too.

The modified forum menu will look like this:


Basically, we need to open our index.css and make some changes.
1. For moving the curve body a little bit lower, find:

Code Select Expand


body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}
Change it to:

Code Select Expand


body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 45px 0;
}

2. To move current menu to very top of your forum, find:

Code Select Expand


#main_menu
{
padding: 0 0.5em;
float: left;
margin: 0;
width: 98%;
}
Change it to:

Code Select Expand


#main_menu
{
padding: 5px 5%;
float: left;
margin: 0;
width: 100%;
height: 20px;
position: absolute;
top: 0;
left: 0;
background: #eeeeff;
}

3. Lastly, you want to clear the empty spaces under the upper section, so find:

Code Select Expand


#upper_section
{
padding: 5px;
margin-bottom: 1.5em;
}
Change it too:

Code Select Expand


#upper_section
{
padding: 5px;
margin-bottom: -40px;
}

[Hj Ahmad Rasyid Hj Ismail]

As a bonus, you may want to make it a fixed position instead of absolute position. Fixed position means the menu will remain on top (and will not disappear while you are scrolling up and down). Just find the main menu css again:

Code Select Expand

#main_menu
{
padding: 5px 5%;
float: left;
margin: 0;
width: 100%;
height: 20px;
position: absolute;
top: 0;
left: 0;
background: #eeeeff;
}
And change the word "position: absolute;" to "position: fixed;" like this:

Code Select Expand

#main_menu
{
padding: 5px 5%;
float: left;
margin: 0;
width: 100%;
height: 20px;
position: fixed;
top: 0;
left: 0;
z-index: 5;
background: #eeeeff;
}
Note that "z-index: 5;" is added. It makes the main menu remains on top while scrolling over other other menu like admin or profile menu.

That is all for now. I hope you all like it.

[Antechinus]

Take a look at this too: http://www.simplemachines.org/community/index.php?topic=444219.msg3123598#msg3123598

[Hj Ahmad Rasyid Hj Ismail]

Take a look at this too: http://www.simplemachines.org/community/index.php?topic=444219.msg3123598#msg3123598

Already did that. A nice one I'd say.

[rspsloading]

sorry i was away, i will try this now and tell you how it went

[rspsloading]

thanks for this so much its working completely great!:D

[Hj Ahmad Rasyid Hj Ismail]

You're welcome. Note that I have changed the background color for the main menu to #eeeeff as I think it will blend better with Curve theme if compared to lightgrey. OP and related post are changed accordingly.

[Mick.]

Yup, I always liked 'fixed' menus. Been using it for a long time

www.chevyavalancheclub.com

[Hj Ahmad Rasyid Hj Ismail]

That's nice... Very nice...

[Mick.]

That's nice... Very nice...

one time I took it off and my users complaint about it. They got used to it. Lol

[Hj Ahmad Rasyid Hj Ismail]

I can understand their needs because that menu are really useful when it is at one place. They just need to look up at at the top for what they want, browse and click! So simple but really useful indeed.

[awolexpat]

Would there be any way to adapt this so that the whole top part of the forum containing the menu bar and everything above it would remain static, and everything below scrolled? I am thinking that this will require editing of more than css but either way can anyone give me some pointers?

[Mick.]

Would there be any way to adapt this so that the whole top part of the forum containing the menu bar and everything above it would remain static, and everything below scrolled? I am thinking that this will require editing of more than css but either way can anyone give me some pointers?

is explained on reply 1.

[awolexpat]

bluedevil,
I haven't tried the code yet but my understanding of it is that it moves the menu bar to the top and everything beneath it will then scroll; I would like to keep the menu bar where it is (beneath my logo, Welcome user, search box etc) and only have what is beneath that scroll. If the reply you refer to does that then all well and good and i will give it a try.

[Mick.]

No. Leaving the menu where it is originally and making it fixed won't work with the codes provided.

Besides ill be mad if you wont give me room to view your forum when using Firefox. Firefox uses too much junk in the browser.

In other words, its too much to keep 'fixed'.

[Hj Ahmad Rasyid Hj Ismail]

Would there be any way to adapt this so that the whole top part of the forum containing the menu bar and everything above it would remain static, and everything below scrolled? I am thinking that this will require editing of more than css but either way can anyone give me some pointers?

I know what you mean. You will need to know the division that controls the whole of the header part in SMF. Then, make its postion fixed. Try to explore this. I am not really active these days to support customization but if you understand the above tips/tricks, you can do it to other things which involve css as well.

[Afro]

I like this your tips but it breaks the responsive theme for mobile users.How can i move the menu to replace the smf logo... that is in the smf logo by the top right corner

[Miker1029]

Can you tell me how to move the entire menu block down 1 level, I tried in the index.css, But alls I'm getting is it Stretching the block, I can't find where to just adjust the entire block down.....

Thanks

Mike

[Hj Ahmad Rasyid Hj Ismail]

I can't get you clearly. A picture, a site link and what you wanna to achieve may help me or others to help you.

[Miker1029]

Here ya go, I'm just trying to create some space between the Error Link (Right above menu bar) and the Menu Bar itself, In Firefox that is Actually Under the Menu Bar.

Thanks

Mike