change nav button width to container width

Wow you have a lot of overwritten CSS in your code. Just to clarify is it the white area to the right of the navigation element on a:active and a:hover that you’re trying to get rid of?

No, sorry, I wasn’t all that specific I think. It’s the side nav bar buttons; they sit inside a container that’s white. I had thought of making the container the same color as the nav buttons, but that didn’t look so good. But I think making the buttons span the whole width of the container would do it.

And yes, I have a lot of new CSS… I’m not used to using templates/themes, I like to be able to tweak things visually; I’m hoping it will end up not looking like a WP blog in the end! I’m tied to using the theme and WP generally, not my decision, although definitely not a bad one.

Dont’ worry too much about the ‘looking like a blog’ thing. WordPress powers CNN and Martha Stewart and those don’t look like blogs so you’re probably good as long as you can get the stylesheet tweaked the way you want it.

With the clarification I can tell you that you have a margin set on .suf-flat-widget on line 2199 of your style.css. Nuke the margin (margins go clockwise top, right, bottom, left) so swap out that 8 with a zero. On line 52 you have a sidebar shell that is putting white around the edge, either kill that border-color:white or find where your shell is sized up a few pixels from your actual sidebar and set the two widths to be the same. Looks like you’ve got three containers shoehorned in there on that theme and that’s what’s causing the color issue.

Let me know if you continue to have trouble but killing those two lines fixed the issue in my firebug though it did remove some additional styling that you might want to add back in later.

Thanks pearluvsapple, I feel encouraged now!

But still I can’t find the CSS that controls the width of my nav buttons. I’ve got a gray border around them (which I hoped would butt up against the gray wrapper background that’s outside the red container), and they are still sitting in the container which is still wider than the buttons.

Have a look at the CSS, you’ll see what I attempted to do, anyway. I think it was what you suggested.

I put in

.suf-flat-widget {
margin: 0px 0px;
}
and made the other container background gray to lose it visually.

But I’m not sure that the nav bars belong to ‘suf-flat-widget’. Am I looking at the wrong class of objects?

Your navbar seems the width of the container? Do you want the actualy navbar buttons to be further apart?

Maybe I can put an image of what I want it to look like in the blog’s content, so you can see it there…Yes! That should explain what I’m after!

That would help. You might also try downloading the most recent version of Firefox and using the 3d visualized to get a better idea of exactly what elements your looking at changing and where they are in relation to each other.

still not getting it…

When I inspect the first nav button in chrome, this flicks briefly up on screen, so I have to hit ‘prt scr’ and paste it to photoshop to read it:)

li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-118.mm-tab 142px x 43px

I’m guessing this piece of html is generated with php, so how I’d go about changing the values for width I don’t know (only just met php), and whether I should is another matter, as it may not display properly on a smaller screen , for instance. That’s guesswork, so I may be wrong.

Can anyone suggest how I should change the value of the width to equal the width of the container? The container is currently 160px wide, it seems that the width of the nav buttons is always 18 px less than the container.

how mayu css file is working in your theme
check it
it conflict thats wy it not fiex it.

I have done something that sort of acheives what I wanted, but I still want to understand how to make that 18px width difference go away.

The margins set in this CSS (line 2199) are causing that:

.suf-flat-widget {
    margin: 15px 8px;
}

Change the 8 to zero.

Then also add:

.suf-flat-widget ul li {
    padding-left: 0;
}

This seems to have sorted it out. I’d added this into the code a while back, after pearluvsapple’s reply.

.suf-flat-widget {
margin: 0px 0px;
}

but that didn’t do it for some reason.

Adding

.suf-flat-widget ul li {
padding-left: 0;
}

places the button text too close to the edge of the button, so I took that off again.

Problem solved, I’d say.

Thanks!