Archived topic
Positionaing Widget on Header
4 replies · Started by elsa on February 7, 2018
Hi,
Currently I use this to split header into 3 parts and inserting 2 widgets of navigation menu in the right header. How to do positioning of the widgets? I want to make the appearance in the right header:
Level 1: menu 1011
Level 2: menu 1010
<blockquote><div class="grid-33 header-left">
</div>
<div class="grid-33 header-center">
</div>
<div class="grid-33 header-right">
[widget id="nav_menu-1011"]
[widget id="nav_menu-1010"]
</div></blockquote>Thanks
You could give this CSS a shot:
.site-header .widget_nav_menu li {
display: inline-block;
}You'll want to remove the floats from the surrounding elements though.
Hi Tom,
Thanks so much, it's working! I used as mentioned,
.site-header .widget_nav_menu li {
display: inline-block;
}
@media (min-width: 769px) {
.site-header .widget_nav_menu {
position: absolute;
right: 0;
}
}
But I still need to make the widget separated, menu 1011 above menu 1010. How to do that?
Separate them horizontally?
Try this:
.site-header .widget_nav_menu {
margin-bottom: 10px;
}ok cool
