The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS inline block padding

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #185642

    Problem with the display on the navigation menu in a wordpress site. The navigation looks good until you hover over it. I would like to get the drop down resized to something sensible but I cannot figure out the required changes to the css.

    The css is

    .topbar-right .topbar-level-1 li a, .topbar-right a {
        color: #FFF;
        font-size: 13px;
        line-height: 30px;
        display: inline-block;
        padding: 120px 10px 0px;

    Website is Your text to link here…

    Would really appreciate some help here as I am completely stuck.

    Thank you


    The navigation looks good until you hover over it.

    Are you referring to the log-in section…?

    I’m not seeing anything happening on hover of that link.


    Ah, yes, you are correct. You need to be registered to see the problem.

    I have created a temporary log in.

    Please use guest/demo


    There’s something fundamentally wrong here with the positioning of the menu and thus the ‘sub’ menu but I need time to work it out.

    Removing ALL that padding would be a start though.

    Also resetting the margins as this

    h1, h2, h3, h4, h5, h6, p, dl, ul, ol {
    margin: 0.8em 0 0.3em;

    is making the hover difficult.

    If you take off all the padding and set the margins to 0 the submenu operates pretty well BUT the top level menu is out of place.

    That I’ll have to look at.


    OK, I haven’t had a lot of time to look much further but the initial problem seems to be that .topbar-left and .topbar-right are posiitioned absolutely instead of more..ahem…traditional layout methods.

    I’d be looking at other options for laying out those two divs…everything else should follow.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.