WordPress.org

Ready to get started?Download WordPress

Forums

change nav button width to container width (13 posts)

  1. moorea21
    Member
    Posted 2 years ago #

    HI,

    I'm using Suffusion 4.0.1 with this site:
    http://www.instituteofchairmans.com/

    I'd like the nav buttons to span the whole width of their immediate container (apologies if I'm using the wrong terms here, that's how I can describe it anyway). I'm using firebug, but can't see how to achieve this in CSS. Is there something in the dashboard/ suffusion options that I've missed?

  2. pearluvsapple
    Member
    Posted 2 years ago #

    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?

  3. moorea21
    Member
    Posted 2 years ago #

    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.

  4. pearluvsapple
    Member
    Posted 2 years ago #

    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.

  5. moorea21
    Member
    Posted 2 years ago #

    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?

  6. teckn1caLity
    Member
    Posted 2 years ago #

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

  7. moorea21
    Member
    Posted 2 years ago #

    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!

  8. pearluvsapple
    Member
    Posted 2 years ago #

    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.

  9. moorea21
    Member
    Posted 2 years ago #

    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.

  10. mukesh panchal
    Member
    Posted 2 years ago #

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

  11. moorea21
    Member
    Posted 2 years ago #

    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.

  12. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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;
    }
  13. moorea21
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic