How can i make two menu walkers with logo in center?

If you’re looking for something like this:

It’s actually not as complicated as using multiple Nav Walkers and can all be achieved with CSS.

#masthead{
    background:#B81237;
    padding:0.1rem 0 0 0;
    box-shadow:#999 0 2px 6px;
    box-shadow:rgba(0,0,0,0.2) 0 2px 6px;
}
.site-logo{
    width:100%;
    margin:0 auto;
    padding:0;
    text-align:center;
}
.site-logo img{
    position:relative;
    z-index:10;
    width:15%;
    margin:0.1rem auto -9rem auto;
}
#site-navigation{
    background:#2C393E;
    padding:0 10%;
    margin:0 auto 1.8rem;
}
.main-navigation #primary-menu.menu{
    width:100%;
    padding:0;
}
.main-navigation #primary-menu.menu li{
    display:block;
    padding:0;
}
.main-navigation #primary-menu.menu li:nth-child(1n),
.main-navigation #primary-menu.menu li:nth-child(2n),
.main-navigation #primary-menu.menu li:nth-child(3n){
    float:left;
}
.main-navigation #primary-menu.menu li:nth-child(4n),
.main-navigation #primary-menu.menu li:nth-child(5n),
.main-navigation #primary-menu.menu li:nth-child(6n){
    float:right;
}

So here’s a breakdown. In the HTML you basically just have the header/logo row above the navigation row. Then, you set a negative bottom margin on the header/logo row – you’ll have to fiddle with the values, the one pictured above, -9rem worked best. (rem is the value set as the body’s font-size. So if this body{font-size:16px;}, then -9rem would be margin-bottom:-144px;.

Then using the :nth-child pseudo-selector I give specific instructions to each position in the navigation whether to float right or left.

I’m pretty sure that if I had to do this again though I’d probably instead use CSS flexbox display:flex; instead of manually floating elements right and left using the :nth-child pseudo-selector, so you may want to read up on CSS Flexbox if you want to better automate the layout of the navigation items: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

As an added note you should usually include a bit more code and info with your questions – I’ve just provided a bunch of stuff for you that may not be at all useful because your situation could be entirely different.

Related Posts: