WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Submenus are weirdly padded on the left

[Resolved] Submenus are weirdly padded on the left

  • 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.

Viewing 15 replies - 1 through 15 (of 20 total)
  • deepbevel
    Member

    @deepbevel

    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.

    deepbevel
    Member

    @deepbevel

    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.

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

    deepbevel
    Member

    @deepbevel

    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.

    deepbevel
    Member

    @deepbevel

    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.

    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.

    deepbevel
    Member

    @deepbevel

    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.

    must be something else, no dice.

    deepbevel
    Member

    @deepbevel

    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;
    }

    `

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

    deepbevel
    Member

    @deepbevel

    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.

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

    deepbevel
    Member

    @deepbevel

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

    deepbevel
    Member

    @deepbevel

    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..

    matt-tyas
    Member

    @matt-tyas

    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.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] Submenus are weirdly padded on the left’ is closed to new replies.