Suckfishnav Adjustment

[Mike429]

I am using the suckerfishnav on the kubrick template, the code is in the CSS and the header right where it belongs. The problem I am having is… I would like to bring the nav bar inside the border of my template, I have tried to change the code but not sure exactly what to change that will bring in both sides of the nav bar. I am not using the plug in for this it gave an fatal error so I reverted to just code. Great Nav bar just need some help tweaking it.

You can see what I am talking about at http://www.recipesbymike.com

I think that I posted this another place on this website, I apologize for that.

[imported_Ryan]

What fatal error were you getting?

Something like the following should shrink the width of the menu down and center it:
[code:1raghnot]#suckerfishnav {width:600px;margin:0 auto;}[/code:1raghnot]

You would need to adjust the width value to match the site (I didn’t measure the width to know the exact value to use).

[Mike429]

Here is the code out of the site, I am not seeing any changes no matter what I do, there has to be something I am missing….

[code:102lnfy4]#suckerfishnav {
    background:#6b6b6b url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat-x;
    font-size:12px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:40px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#dddddd;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:99px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:12px;
    color:#dddddd;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#1F3E9F;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#dddddd;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#dddddd;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#dddddd;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#444444;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#3b3b3b;
    }[/code:102lnfy4]

[imported_Ryan]

I would have thought that the change I suggested above would work, but you don’t seem to have implemented it.

[Mike429]

Yes I did, nothing changed, the code I put in the last post is the original code, I worked for hours changing code with no luck, I could get one side of the nav bar inside the template border but not both. I can reduce the size of the nav bar but can not make it center on the template.

[imported_Ryan]

I’ll keep helping, but only if I can see what those changes I suggested you make did. Otherwise I’ll probably just come up with the same solution again.

[Mike429]

Could you highlight where you would like me to make those changes and then I will leave it up for you to see or take a screen shot, I have tried it but removed it because it made matters worse. I have been able to change anything I want except to bring that bar inside the template border.

[CrowdTamers]

You could add margins on one side or on either side of the nav bar, or go for the old classic "two auto width div’s and a centered fixed width div".

For example: I took a quick look at it and by changing the following in FireFox’s awesome plugin Firebug, it seemed to address the issue for you:
[quote:3ccisxqz]
#suckerfishnav, #suckerfishnav ul {
    border:2px solid #AAAAAA;
    float:right;
    line-height:25px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin-right:9px;
    padding:0;
    width:97%;
[/quote:3ccisxqz]

That said, you could manage it more effectively (and in a more accessible-friendly format) by throwing in between two divs so that if someone magnifies your page (with CTRL + or CTRL -) the menu won’t bork.

[Author]

Posts