Horizontal Menu

Legohead / 2011-11-08 10:47:28   

Hello,

I know this has been done a hundred times but I've searched the forums for 'horizontal menu' and 'simple horizontal menu' to no avail for what I'm after, I've found those two themes that are available, one being the centred theme. I'm trying to create a pretty simplistic menu similar to the sample menu but centred and horizontal at the top of the page. Can anyone help me or tell me where I might locate the code for such a thing?

Many Thanks!

Legohead / 2011-11-08 10:51:38   

Something similar to these as examples.. but just simple with a logo on the left.

http://www.sunsea34.com/index.html
http://www.127bricklane.com/About.html
http://hatosbar.com/top.html

G470 / 2011-11-08 18:16:29   

Hi, the solution to your problem is css based.
to create a horizontal menu you just have to add some css rules to you ndxz-studio/site/yourtheme/style.css file.

If you use the sample theme just add these rules to the file:

#menu {
width: 100%;
overflow: auto;
top: 0;
bottom: 0;
left: 0;
position: absolute !important;
}

#menu .container ul li { float:left;}

the rest is just your creativity :)

best wishes : G470

ps. it´s not the same on every theme so please post your url.

Legohead / 2011-11-09 13:43:06   

Thanks so much for the reply G470, much appreciated!

I put the code in the CSS file and it has successfully set the menu options along a horizontal axis but the spacing is off and it hasn't centred, i tried changing to float:center but it didn't work, probably not the right way to do it right?

Heres the site I'm working on...

The Blue Monday.com

Thanks mate!

luis_diaz / 2011-12-16 15:32:00   

Hello,

I´m having more or less the same problem as Legohead. I tried the solution posted by G470 (by the way, thank you very much for your help in the different threads of this forum) and didn´t work for me.

I´m redesigning this site:

http://www.luisdiazdiaz.com/commissions/redbull-music-academy/

which now looks like this this

and I want it to look this other way

I don´t know if it´s an easy thing, but I´m stuck here and changing to the centered theme would disarrange all my exhibits. Is there another way to do it?

Can anybody help me please?

Many thanks in advance

G470 / 2011-12-17 02:58:26   

...and again ;)
First step is to change your menu container:

  1. #menu {
  2. width: 600px;
  3. overflow: auto;
  4. position: fixed;
  5. height: 100%;
  6. background-color: red;
  7. padding-left: 0px;
  8. text-align: left;
  9. margin: 0 auto;
  10. }

second step is to float your logo and menu:

  1. #menu .container{width:100%;}
  2. #menu .container p{float:left;height:20px; width:200px}
  3. #menu .container ul{}
  4. #menu .container ul li{float:left; margin-right:20px}
luis_diaz / 2011-12-17 13:25:39   

Many thanks!
I managed to center de menu on the top of the page but the result it´s not an horizontal menu, the sections are one over the other (verticaly aligned) and i´d like them to be horizontally aligned in order to make a drop down menu. Is that possible?

luis_diaz / 2011-12-17 13:39:07   

p.s. The menu should also be fixed at the top of the page and not scrolling with the exhibit.

luis_diaz / 2011-12-17 16:33:08   

(Sorry if I´m asking too much)

G470 / 2011-12-18 05:24:38   
  1. no problem ;)
  2. if you want to create a dropdwn menu just remove
  3. #menu .container ul li{float:left; margin-right:20px}

to center the menu fixed on top, you have to do it like this:

  1. #menu{width:900px; position:fixed; top:0px; left:50%; margin-left-450px;}
luis_diaz / 2011-12-18 12:22:43   

Thanks again,
one very last thing. I applied the expandingmenus.js to my index.php, and the sections returned again to be vertically aligned. Where´s the conflict now?

This thread has been closed, thank you.