Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Menu Split by Logo Reply To: Menu Split by Logo

#118430
chrisburton
Participant

This is how I did it with WordPress. I had to create two separate custom menu’s, “Main” and “Secondary”. In the middle I outputted my logo. This allows you to use margin-right for the left menu and margin-left for the right menu.

<?php wp_nav_menu( array('menu' => 'Main', 'container' => '', 'items_wrap' => '<ul id="main">%3$s</ul>' )); ?>

<h1 class="logo" alt="Christopher Burton"><?php bloginfo('name'); ?></h1>

<?php wp_nav_menu( array('menu' => 'Secondary', 'container' => '', 'items_wrap' => '<ul id="secondary">%3$s</ul>' )); ?>

However, I probably wouldn’t go about it in that way if I could help it. I changed my markup after switching CMS’s and it’s much easier to control adding classes to each list-item.

<nav>
<ul>
<li class="home"><a href="#">Home</a><li>
<li class="about"><a href="#">About</a><li>

<li><h1><a class="logo"> href="#">Home</a></h1><li>

<li class="news"><a href="#">News</a><li>
<li class="projects"><a href="#">Projects</a><li>
</ul>
</nav>

Result:

http://codepen.io/chrisburton/pen/ksqur