Welcome! To use this support forum, please Login or Join Today!

   

Splitting Menu Navigation

{name}
Rank

Total Posts: 23

Joined 2015-08-06

PM

 

Hi Casey,

I’m attempting to split the menu navigation to float left and right of a centered logo (e.g., three menu items to the left, three menu items to the right). This can be achieved with CSS, but for responsive designs, the CSS solution gets a bit wonky.

For now, I’ve achieved the desired effect in the child theme’s functions.php like so:

/*-----------------------------------------------------------------------------------*/
// Split Menu Navigation
/*-----------------------------------------------------------------------------------*/

function st_main_nav() {
 $menu_placement 
of_get_option('mainmenu_placement');

 echo 
'<div id="menu" class="'.$menu_placement.'">';
 if (
$menu_placement == 'below'{
  
echo '<div class="container">';
  echo 
'<div class="sixteen columns">';
 
}

 wp_nav_menu
( array( 'container_class' => 'menu-header-left''theme_location' => 'primary''menu_id' => 'nav'));
 
wp_nav_menu( array( 'container_class' => 'menu-header-right''theme_location' => 'secondary''menu_id' => 'nav2'));
 
 if (
$menu_placement == 'below'{
  
echo '</div><!--/.columns row-->';
  echo 
'</div><!--/.container-->';
 
}
 
echo '<div class="clear"></div>';
 echo 
'</div><!--/#menu-->';
}
add_action
'st_header''st_main_nav'3); 

While this works by letting me float the menu-headers, and allows a user to manage ‘primary’ and ‘secondary’ menus via the WordPress menu dashboard, it creates separate unordered lists for each menu. By the way, the ‘primary’ and ‘secondary’ menus collapse perfectly on smaller devices (i.e., they appear to become one menu).

I’m wondering if there’s a way to remove the ul tags from the secondary menu (which would combine the ‘primary’ and ‘secondary’ menus) or if you know of a more elegant way to achieve this effect. As an example, this website does exactly this by adding a span to the secondary menu and floating it right.

If you have any ideas, or could point me in the right directly, I’d really appreciate it.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I think the best way to do this is to leave it all in one menu and then apply a unique style to the middle menu item.
You can set a class like so: http://cl.ly/image/3j3f2F2Y0e0L

and style it something like:

li.home-menu a {
    display
:block;
    
text-indent:-9999em;
    
width:100px;
    
height:100px;
    
backgroundurl('../images/logo.png');

You might want to hide it on mobile and show the normal logo instead.

{name}
Rank

Total Posts: 23

Joined 2015-08-06

PM

 

Casey, in retrospect, you’re right. The simplest solution is the one you’ve outlined.

I really appreciate you taking the time to think this through. Thank you.

Stellar support!