0

I need some tips on how to turn a custom menu to be a drop-down menu. The menu needs to be positioned horizontally inside the green bar (whereas the default nav menu would be right where the header image is.)

The custom menu was created and styled using a WordPress Twenty Sixteen child theme dubbed "Simple Clean Design". Here's what it looks like:header and menu bar

So this is the code I put into the bottom of header.php (couldn't make the menu go below the header image other than putting it below </head>:

<div class="new_menu_class" >
    <?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
</div>

<div id="content" class="site-content">

I was able to position the menu, but couldn't get the drop-down to work.

And here's the style.css file for the child theme:

.new_menu_class {
  position: relative;
  overflow: hidden;
  background-color: #96ab36;
  border: 0;
}

.new_menu_class .ul {
    list-style: none;
    margin: 0;
    overflow: hidden;
    border-width: 0px;
}

.new_menu_class li {
   list-style: none;
   font-size: 16px;
   font-weight: 700;
   color: #2a2b2b;
   margin-right: 1%;
   padding-right: 2%;
   padding-bottom: 15px;
   float: right;
   background-color: #96ab36;
   border-width: 0px;
}

.new_menu_class li a {
    list-style: none;
    font-size: 16px;
    font-weight: 700;
    color: #2a2b2b;
    padding: 8px;
    border-width: 0px;
}

Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.