Navigation - Size of menu items

13 posts from 3 voices

• Started 2 years ago by jabadabadu
• Latest reply from Dude
• This topic is resolved

Tags:

No tags yet.

1. 

   jabadabadu
   Member

   Hi,
   I need to make some adjustments to my navigation menu.

   1) make all navigation text centered, instead of aligned left

   2) some of my menu points are very short (e.g. "Blog"), whereas others are longer (e.g. "Personalized Services"). What happens is that "Personalized Services" gets broken up, so it looks like this:
   "Personalized
   Services"

   I would like to make the menu point for "Blog" smaller, and the menu point for "Personalized Services" larger, so that I can display it in one line, without a line break.
   I could imagine this would work by defining the size of a menu item in terms of a fixed padding space left and right of the text, instead of a fixed total width for each menu item.
   (so instead of making each menu item e.g. 115 pixels wide, there should just be a 10 pixel padding space on both the left and the right side of the text, and the width of the menu item itself would be generated dynamically according to the text).

   Hope it's understandable what I'm after. It is essentially about making better use of the available space. I created an example graphic:

   http://img843.imageshack.us/img843/689/navigationexample.jpg

   Thanks!

   Posted 2 years ago #
2. 

   James Morrison
   Former Team Member

   Hey,

   The CSS needs a little adjustment to accommodate this. Open up style.css and (around line 199) find this code:

   #top .nav a {
   display:block;
   float:left;
   line-height:18px;
   min-height:35px;
   outline:medium none;
   padding:2px 10px;
   text-decoration:none;
   width:95px;
   }

   Change it to:

   #top .nav a {
   display:block;
   float:left;
   line-height:18px;
   min-height:35px;
   outline:medium none;
   padding:2px 10px;
   text-decoration:none;
   text-align: center;
   }

   This removes the width (which means it will be automatically set by the text) and aligns the text in the centre. The padding can be adjusted (currently 2px top and bottom / 10px left and right) if you want more spacing between the text and dividing lines.

   James

   Posted 2 years ago #
3. 

   jabadabadu
   Member

   Hey James,

   thanks again! Works neat.

   Now the whole background of the navigation bar and the logo is taking up too much space vertically. How can I reduce the vertical size of the area where the logo and the navigation is?

   Posted 2 years ago #
4. 

   jabadabadu
   Member

   please check my last post from 1 week ago, regarding reducing the vertical size of the area where the logo and navigation is. Thanks.

   Posted 2 years ago #
5. 

   Dude
   Dude

   Open style.css and search for following code:
   

   #wrapper_head{
   position: relative;
   z-index: 100;
   overflow: visible;
   }

   and add an height attribute like:
   

   #wrapper_head{
   position: relative;
   z-index: 100;
   overflow: visible;
   height:50px;
   }

   please change 50px to any value you like.

   The Dude

   Posted 2 years ago #
6. 

   jabadabadu
   Member

   Thanks a lot, Dude :-) works perfect :-)

   Posted 2 years ago #
7. 

   Dude
   Dude

   Great. :-)

   The Dude

   Posted 2 years ago #
8. 

   jabadabadu
   Member

   just found out about another thing that needs tweaking now. When I hover over a menu point that has submenu points, they open, when I move the mouse arrow down, they close and reopen sometimes, and sometimes not reopen (depending upon how fast the mouse arrow moves).

   I demonstrated prob in my youtube video: http://is.gd/f0T0G

   Posted 2 years ago #
9. 

   James Morrison
   Former Team Member

   Hey,

   Can you post the site URL?

   James

   Posted 2 years ago #
10. 

    jabadabadu
    Member

    Hey James,

    sure: http://www.urlgone.com/ddf7ad/

    please do not post our link/name here :-) Thx!

    Posted 2 years ago #
11. 

    James Morrison
    Former Team Member

    Hey,

    You're not using the description text so the sub-menu needs its' position adjusting slightly. Open up style.css and on line 224 you'll find this code:

    #top .nav ul {
    display:none;
    left:0;
    padding-top:30px;
    position:absolute;
    top:20px;
    width:192px;
    }

    Change top:20px; to top:10px; - you should now find that the drop down doesn't disappear before you can get your mouse over it.

    James

    Posted 2 years ago #
12. 

    jabadabadu
    Member

    Hey James,

    thanks, perfect!

    Posted 2 years ago #
13. 

    Dude
    Dude

    Glad that James could help you.

    Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.