Advertisement:

Author Topic: Moving Menu To Top Using CSS for 2.0  (Read 35052 times)

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,916
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Moving Menu To Top Using CSS for 2.0
« 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:


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;
}
« Last Edit: August 01, 2011, 06:45:58 AM by ahrasis »

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,916
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: Moving Menu To Top Using CSS for 2.0
« Reply #1 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.
« Last Edit: August 01, 2011, 06:46:40 AM by ahrasis »

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,805
  • Master of BBC Abuse

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,916
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia

Offline rspsloading

  • Semi-Newbie
  • *
  • Posts: 38
Re: Moving Menu To Top Using CSS for 2.0
« Reply #4 on: July 31, 2011, 05:30:18 PM »
sorry i was away, i will try this now and tell you how it went

Offline rspsloading

  • Semi-Newbie
  • *
  • Posts: 38
Re: Moving Menu To Top Using CSS for 2.0
« Reply #5 on: July 31, 2011, 05:53:53 PM »
thanks for this so much its working completely great!:D

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,916
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: Moving Menu To Top Using CSS for 2.0
« Reply #6 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.
« Last Edit: August 01, 2011, 06:49:06 AM by ahrasis »

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,065
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Moving Menu To Top Using CSS for 2.0
« Reply #7 on: September 15, 2011, 08:50:32 AM »
Yup, I always liked 'fixed' menus. Been using it for a long time ;)

www.chevyavalancheclub.com

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,916
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: Moving Menu To Top Using CSS for 2.0
« Reply #8 on: September 15, 2011, 09:17:37 AM »
That's nice... Very nice...

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,065
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Moving Menu To Top Using CSS for 2.0
« Reply #9 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

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,916
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: Moving Menu To Top Using CSS for 2.0
« Reply #10 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.

Offline awolexpat

  • Jr. Member
  • **
  • Posts: 129
Re: Moving Menu To Top Using CSS for 2.0
« Reply #11 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?

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,065
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Moving Menu To Top Using CSS for 2.0
« Reply #12 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.

Offline awolexpat

  • Jr. Member
  • **
  • Posts: 129
Re: Moving Menu To Top Using CSS for 2.0
« Reply #13 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.

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,065
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Moving Menu To Top Using CSS for 2.0
« Reply #14 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'.

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,916
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: Moving Menu To Top Using CSS for 2.0
« Reply #15 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.

Offline Afro

  • SMF Hero
  • ******
  • Posts: 1,855
  • Gender: Male
  • http://twitter.com/afrowall
    • Global Runs
Re: Moving Menu To Top Using CSS for 2.0
« Reply #16 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

Offline Miker1029

  • Jr. Member
  • **
  • Posts: 165
  • Gender: Male
    • http://www.facebook.com/428239094034539 on Facebook
    • https://plus.google.com/+Android-x86Net/about on LinkedIn
    • @AndroidX86Forum on Twitter
    • Android - X86 Forums
Re: Moving Menu To Top Using CSS for 2.0
« Reply #17 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

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,916
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: Moving Menu To Top Using CSS for 2.0
« Reply #18 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.

Offline Miker1029

  • Jr. Member
  • **
  • Posts: 165
  • Gender: Male
    • http://www.facebook.com/428239094034539 on Facebook
    • https://plus.google.com/+Android-x86Net/about on LinkedIn
    • @AndroidX86Forum on Twitter
    • Android - X86 Forums
Re: Moving Menu To Top Using CSS for 2.0
« Reply #19 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