Horizontal scale menu in wordpress

Question

In many WordPress templates menu is not extended to the entire width of the element in which it is located. Scalable trying to make the menu that fits the width of the div in which it is located.

View my problem

My header.php

<div class="navigation-menu">
  <div id="navbar" class="header-bottom navbar default">
                        <nav id="site-navigation" class="navigation main-navigation" role="navigation">                                 
                            <h3 class="menu-toggle"><?php _e( 'Menu', 'templatemela' ); ?></h3>
                            <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'templatemela' ); ?>"><?php _e( 'Skip to content', 'templatemela' ); ?></a> 
                            <div class="mega-menu">
                                <?php wp_nav_menu( array( 'theme_location' => 'primary','menu_class' => 'mega' ) ); ?>

                            </div>  

                        </nav><!-- #site-navigation -->
    </div>

Something similar to this: http://getbootstrap.com/components/#btn-groups-justified ? — segFault, Nov 01 '15 at 22:05

score 0 · Answer 1 · edited May 23 '17 at 12:14

To better post your question, you need the html generated by wp_nav_menu. You can get it by opening your page in Chrome, right click on your menu and choose 'Inspect Element'. Then you will be able to copy the html that you wish to style. Without it, we will be guessing.

Here is a guess:

.mega-menu ul { display:table; width:100%; table-layout: fixed; }
.mega-menu ul > li { display:table-cell; width:100%; }

This is converting your UL menu to display like a table. And hopefully to make the items equal widths, as shown in this thread: CSS table-cell equal width.

Horizontal scale menu in wordpress

1 Answers1