Archived topic
Move drop down box/items below header area?
3 replies · Started by nordicsouth on April 24, 2021
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?
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;
}
}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.
You are welcome :)
