Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #915

    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!

    #33361

    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

    #33362

    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?

    #33363

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

    #33364

    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

    #33365

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

    #33366

    Great. :-)

    The Dude

    #33367

    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

    #33368

    Hey,

    Can you post the site URL?

    James

    #33369

    Hey James,

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

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

    #33370

    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

    #33371

    Hey James,

    thanks, perfect!

    #33372

    Glad that James could help you.

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Navigation – Size of menu items’ is closed to new replies.