Menu icon Foundation
Splitted menu on Wordpress

Hi,

I would like to create a site with a splitted menu and the logo in the center.
I tried with this piece of code:

<nav class="top-bar" data-topbar>
      
      <section class="top-bar-section left">
        <?php if (has_nav_menu('splitted_nav_left')) :
          wp_nav_menu(array('theme_location' => 'splitted_nav_left', 'menu_class' => 'left'));
        endif; ?>
      </section>

      <ul class="title-area">
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
      </ul>

      <section class="top-bar-section right">
        <?php if (has_nav_menu('splitted_nav_right')) :
          wp_nav_menu(array('theme_location' => 'splitted_nav_right', 'menu_class' => 'right'));
        endif; ?>
      </section>

    </nav><!-- top-bar -->
            

         

My problem is that the "ul.title-area" is positioned, by foundation, in the left of the topobar like this: http://monosnap.com/image/bwEMSJ2j5D4WrFyRo9vmCXdBVVmCTt

How can I reach what I want?

wordpress menu split

Hi,

I would like to create a site with a splitted menu and the logo in the center.
I tried with this piece of code:

<nav class="top-bar" data-topbar>
      
      <section class="top-bar-section left">
        <?php if (has_nav_menu('splitted_nav_left')) :
          wp_nav_menu(array('theme_location' => 'splitted_nav_left', 'menu_class' => 'left'));
        endif; ?>
      </section>

      <ul class="title-area">
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
      </ul>

      <section class="top-bar-section right">
        <?php if (has_nav_menu('splitted_nav_right')) :
          wp_nav_menu(array('theme_location' => 'splitted_nav_right', 'menu_class' => 'right'));
        endif; ?>
      </section>

    </nav><!-- top-bar -->
            

         

My problem is that the "ul.title-area" is positioned, by foundation, in the left of the topobar like this: http://monosnap.com/image/bwEMSJ2j5D4WrFyRo9vmCXdBVVmCTt

How can I reach what I want?

Daniele Pavinato over 4 years ago

Would may be correct to proceed in this way?

.top-bar .title-area {
   position: absolute;
   width: 100%;
   text-align: center;

Rafi Benkual over 4 years ago

That might work.

This will help http://codepen.io/rafibomb/pen/vEJrdv

Daniele Pavinato about 4 years ago

Thanks very much!