[Resolved] Move drop down box/items below header area?

[nordicsouth]

Hi I am rebuilding my menu. I use a standard menu with nav float right. Because of the header padding, the drop down menu items opens “somewhere in between”, and that doesn´t look good. (See link in private info.)

Is it possible to create some gap between first level items and the sub-menu/drop down, to push the sub menu area/box/item down “below” the header? By adding some bottom-margin to the first-level-items? Or top-margin to the sub menu box/items?

I want to achieve the look that the menu opens from “the edge” between header and content. (Like it would do if I did not have any padding on the header, or if I would use Navigation as header).

This must also work for tablet, where I have made the navigation drop below the logo.
If i remove the header padding and make the top level menu items much higher a lot to mimic that height, it looks good on desktop. But on tablet the top menu items becomes far to high, adding a big gap between the logo and the navigation..

Is there a right CSS code or solution?

[Ying]

Hi there,
Try this CSS:

@media (min-width: 769px) {
.main-navigation li.menu-item-has-children > ul {
    margin-top: 35px;
}
.main-navigation li.menu-item-has-children ul:before {
    content: "";
    height: 35px;
    top: -35px;
    position: absolute;
    left: 0;
    right: 0;
}
}

[nordicsouth]

Thank you, that did the trick! Now I can go on. Solved.

I tried different CSS-code first, but this one was a bit over my knowledge and I didn´t find the “menu-item has children” anywhere.

[Ying]

You are welcome 🙂

[Author]

Posts