Sub menu in responsive menu won’t push down the menu

3 Views

I’m using WordPress with a Bootstrap theme and there’s a problem with the responsive menu that I need some help with.

The problem is that the sub menus are floating over the menu instead of pushing it down. I guess it’s because the sub menu is floating (float: left) but whatever I try won’t solve the problem.

Read More

enter image description here
enter image description here

html: 

<div class="navbar-collapse navbar-header-collapse in">
    <ul class="nav navbar-nav navbar-right">
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-90">
            <a title="Foo" href="#" data-toggle="dropdown" class="dropdown-toggle">Foo       
            <span class="caret"></span></a>
            <ul role="menu" class=" dropdown-menu">
                // more li elements
            </ul>
        </li>
    </ul>
</div>

The CSS comes from Bootstrap which will be pretty space consuming if I put it in here.
If you need more code please comment and try to be specific.

Thanks in advance!

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Thats because layout missing. Try to add overflow:hidden to the parent of the floating elements

    Try some of this rules. Use only one of them

    zoom:1; /*not a valid*/
height:1%;
display:inline-block;
element:after {
    content:'';
    display:block;
    clear:both;
}