[Resolved] Positionaing Widget on Header

[elsa]

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

[Tom]

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.

[elsa]

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?

[Tom]

Separate them horizontally?

Try this:

.site-header .widget_nav_menu {
    margin-bottom: 10px;
}

[elsa]

ok cool

[Author]

Posts