Simple Machines Community Forum

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:

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:

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:

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

#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:

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

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

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:
#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:
#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.

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

Zitat von: Antechinus in Juli 31, 2011, 04:51:02 VORMITTAG
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.

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

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

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.

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

www.chevyavalancheclub.com

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

Zitat von: ahrasis in September 15, 2011, 09:17:37 VORMITTAG
That's nice... Very nice...

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

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.

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?

Zitat von: awolexpat in September 15, 2011, 11:19:12 VORMITTAG
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.

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.

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'.

Zitat von: awolexpat in September 15, 2011, 11:19:12 VORMITTAG
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.

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

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

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.

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

Ok. That is not what this trick is doing nor that it is supporting custom theme but you try to add top margin to the main menu css to move it a bit down. Note that z-index is making it appears on top of others.