Shortening the Menu Bar

  • Does anyone know which CSS properties would be required to shorten the menu bar? I’ve only got a few page links so there is alot of excess space on the menu – shortening it would mean:

    1. shortening the grey menu
    2. shortening the shadow below it
    3. moving the RSS and Twitter icons left so that they still fall below the shortened bar.

    Does anyone have any clue how to do this? Any help would be much appreciated ??

    cheers!
    dale

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Mike Smith

    (@daledubilowski)

    So I understand that I can make the grey menu shorter by decreasing the width % below:

    ul.navigation {
    background:url(“images/nav.png”) repeat-x scroll left top #EEEEEE;
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    width:100%;
    z-index:15;

    but I don’t understand how to move the right shadow as well? I tried adding a left:-50 attribute after position:relative but it just moved the menu and everything below it. Any suggestions?

    .shadow-right{background:url(images/shadow.png) no-repeat right bottom;padding-bottom:32px;position:relative;}

    try replacing

    ...no-repeat right bottom.....

    with

    ...no-repeat -50px bottom....

    you might need to change the -50px value

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Shortening the Menu Bar’ is closed to new replies.