Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Hj Ahmad Rasyid Hj Ismail on July 30, 2011, 11:48:13 PM

Title: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on July 30, 2011, 11:48:13 PM
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:
(http://www.simplemachines.org/community/index.php?action=dlattach;topic=444605.0;attach=183468;image)

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]
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]
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]
#main_menu
{
padding: 0 0.5em;
float: left;
margin: 0;
width: 98%;
}
Change it to:
Code: [Select]
#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]
#upper_section
{
padding: 5px;
margin-bottom: 1.5em;
}
Change it too:
Code: [Select]
#upper_section
{
padding: 5px;
margin-bottom: -40px;
}
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on July 31, 2011, 12:33:39 AM
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]
#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]
#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.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Antechinus on July 31, 2011, 04:51:02 AM
Take a look at this too: http://www.simplemachines.org/community/index.php?topic=444219.msg3123598#msg3123598
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on July 31, 2011, 06:00:01 AM
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.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: rspsloading on July 31, 2011, 05:30:18 PM
sorry i was away, i will try this now and tell you how it went
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: rspsloading on July 31, 2011, 05:53:53 PM
thanks for this so much its working completely great!:D
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on August 01, 2011, 01:38:22 AM
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.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Mick. on September 15, 2011, 08:50:32 AM
Yup, I always liked 'fixed' menus. Been using it for a long time ;)

www.chevyavalancheclub.com
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on September 15, 2011, 09:17:37 AM
That's nice... Very nice...
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Mick. on September 15, 2011, 09:34:40 AM
That's nice... Very nice...
one time I took it off and my users complaint about it. They got used to it. Lol
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on September 15, 2011, 09:48:58 AM
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.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: awolexpat on September 15, 2011, 11:19:12 AM
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?
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Mick. on September 15, 2011, 11:32:04 AM
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.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: awolexpat on September 15, 2011, 12:07:39 PM
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.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Mick. on September 15, 2011, 12:21:05 PM
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'.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on November 14, 2011, 11:37:33 PM
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.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Afro on December 20, 2015, 04:57:20 AM
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
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Miker1029 on December 29, 2015, 02:01:09 PM
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
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on January 31, 2016, 09:13:33 PM
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.
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Miker1029 on February 06, 2016, 11:07:13 AM
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
Title: Re: Moving Menu To Top Using CSS for 2.0
Post by: Hj Ahmad Rasyid Hj Ismail on February 12, 2016, 08:48:07 AM
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.