How to style wp_nav_menu();?

CMS & WordPress
1

Hello all!

I am practicing WordPress Theme development, so I need a little help if you please:

I am trying to call the wp_nav_menu(); function in a hidden nav menu (will show after click).

Here is what I did:

<div class="top-bar-right">
   <!-- right content -->
   <ul class="dropdown menu" data-dropdown-menu>
      <li class="is-dropdown-submenu-parent">
         <a id="menu-icon" href="#"> <i class="fa fa-bars"></i> </a><!-- Burger Menu -->
         </i>
         <ul class="menu">
            <?php wp_nav_menu( array('theme_location' => 'header-menu') ); ?>
         </ul>
      </li>
   </ul>
</div>

The code above works perfectly, but
I am trying to insert it here.

<div class="navbar_menu" style="display: block;">
   <div class="holder">
      <div class="row">
         <div class="clumns large-5 medium-6 small-8">
                  <!-- insert PHP here -->
         </div>
      </div>
   </div>
</div>

To put it simple, I am trying to style the menu list. Just duplicate this site’s header:

and the final question is: How do I style the wp_nav_menu();?
by adding html within a loop?
by echoing or returning?

what is your advise?

Thank you

2

I found the solution!

I just add this:

<?php wp_nav_menu( array(
  'theme_location' => 'header-menu',
  'container' => false,
  'menu_class' => 'menu vertical menu_item'
) );

?>

in the menu_class array you set the element’s class, then you head over to css and add this:

 .menu_item a {
	color: red;
}

The reason for the ‘a’ tag is because WordPress outputs that code into a link! and becomes like this:

<ul class="menu vertical menu_item">
  <li>
    <a href="#">Page</a>
 </li>
</ul>

So the final code should be like:

<div class="navbar_menu" style="display: block;">
		<div class="holder">
			<div class="row">
				<div class="clumns large-5 medium-6 small-8">
						<?php wp_nav_menu( array(
							'theme_location' => 'header-menu',
							'container' => false,
							'menu_class' => 'menu vertical menu_item'
						) );

						?>
				</div>
			</div>
		</div>
	</div>
4 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.