WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Submenus are weirdly padded on the left (21 posts)

  1. Harv696
    Member
    Posted 2 years ago #

    http://www.geoideas.net is my site. Look at portfolio, then presentations. the popup submenu has an extra space on its left. I must've put in something I should'nt have in style.css but I dunno where. Does anyone have an idea? Thanks.

  2. deepbevel
    Member
    Posted 2 years ago #

    It's not easy to gt good css help here because it's not specific to wp. So you'll have to settle for me (haha).

    try this:

    #access ul ul li, #access2 ul ul li, #access3 ul ul li {
    padding: 0;
    }

    Then get Mozilla Firebug.

  3. deepbevel
    Member
    Posted 2 years ago #

    But this changes padding on the whole nav, so try:

    #access3 {
    padding: 0;
    }

    One thing I can't do in firebug is isolate part of a div class or id and preview it by itself. Hope this is right.

  4. Harv696
    Member
    Posted 2 years ago #

    Ok, the problem is that effects spacing between menu items too.

  5. deepbevel
    Member
    Posted 2 years ago #

    Yes, that's why you have to isolate the element that you want to change, I was unable to do that in Firebug. I don't know what the css for the flyout menus looks like. But one of those elements must be it, may just be a matter of trial and error. Or maybe someone else may know and lend a hand here. But like I say, this isn't a css forum.

  6. deepbevel
    Member
    Posted 2 years ago #

    this works for the twentyten theme, maybe the same for yours?

    .sub-menu {
    
    padding: 0px;
    }

    I found the name of the element in the wp core files, so it's probably the same.

  7. Harv696
    Member
    Posted 2 years ago #

    I'm using weaver 2010, so they should be similar, but I don't see a "sub-menu" anywhere.

    Here's the thing. I know how to do it. I just set this to 0px:

    div.menu li {
    	float: left;
    	position: relative;
    	padding: 0px 8px;
    }

    The problem is that also takes away padding from the menu items. So another way to solve this is to find what else can make padding between menu items.

  8. deepbevel
    Member
    Posted 2 years ago #

    You don't have to find the css for it, just paste

    .sub-menu {
    
    padding: 0px;
    }

    at the end of style.css. It will override previous if it exists. if no change, then it's called something else.

  9. Harv696
    Member
    Posted 2 years ago #

    must be something else, no dice.

  10. deepbevel
    Member
    Posted 2 years ago #

    hmm, well, as the first code I posted DOES do what you want, it's just a matter of trying each identifier untill it produces the good result. did you try each of these seperately?

    #access ul ul li {
    padding:0;
    }
    or
    #access2 ul ul li, {
    padding:0;
    }
    or
    #access3 ul ul li {
    padding:0;
    }

    `

  11. Harv696
    Member
    Posted 2 years ago #

    Yep. I just post them at the end of style.css?

  12. deepbevel
    Member
    Posted 2 years ago #

    yes, at the very end, one at a time.
    It's odd because I would assume since this is a core function it would be the same from theme to theme. Can't see why the .sub-menu one doesn't do it.

  13. Harv696
    Member
    Posted 2 years ago #

    Maybe it just doesn't override the code that adds the padding?

  14. deepbevel
    Member
    Posted 2 years ago #

    Yes, but that element is always described as "padding" so I can't see how that could be. hmmm.

  15. deepbevel
    Member
    Posted 2 years ago #

    this seems to do it too!

    #access ul ul li, #access2 ul ul li, #access3 ul ul li {
        max-width: 160px;
        min-width: 160px;
    }

    and it doesn't appear to mess up anything else..

  16. matt-tyas
    Member
    Posted 2 years ago #

    Hi your problem is here:
    Change left: 10px; to left: 20px; (bare with me it does work).

    #access ul ul, #access2 ul ul, #access3 ul ul {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 10px;
        padding: 0;
        position: absolute;
        top: 38px;
        width: 200px;
        z-index: 99999;
    }

    and here remove padding: 0 8px; with padding: 0;

    #access .menu-header li,
    #access2 .menu-header li,
    #access3 .menu-header li,
    div.menu li {
        float: left;
        padding: 0;
        position: relative;
    }

    Then find:

    #access a, #access2 a, #access3 a {
    color: #AAAAAA;
    display: block;
    line-height: 38px;
    text-decoration: none;
    }

    and add padding-left: 20px; so its like:

    #access a, #access2 a, #access3 a {
        color: #AAAAAA;
        display: block;
        line-height: 38px;
        text-decoration: none;
        padding-left: 20px; /* or whatever you want the padding to be  but it must match the left: above */
    }

    Hope I got it.

  17. deepbevel
    Member
    Posted 2 years ago #

    so, it really is a padding issue? if so I'm sure glad you stopped by! I would have never figured out what you just did, good show!

  18. Harv696
    Member
    Posted 2 years ago #

    Nailed it. Thanks to both of you!

  19. matt-tyas
    Member
    Posted 2 years ago #

    that and absolute positioning!

    no worries!

  20. deepbevel
    Member
    Posted 2 years ago #

    @Harv686
    are you using/familiar with in-browser develper tools like Mozilla Firebug? If not I'd check it out!

    I used it for this issue so obviously it won't help with everything you do (It really ultimately depends on your knowledge of css) , but it will certainly make many things much easier for you.

  21. Harv696
    Member
    Posted 2 years ago #

    nope never heard of it. I'm new to this stuff. thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags