1

I'm tyring to create a theme with a horizontal menu that is dynamically streched to fill the container element. I use wp_nav_menu() to fetch a menu from the backend and style it via CSS. Here some code:

        <?php wp_nav_menu(
            array( 
                'theme_location' => 'headerNavMenu', 
                'menu_class' => 'headerNavMenu',
                'container_id' => 'headerNavMenu'
            )
        ); ?>

        <div class="headerNavMenu">
          <ul>
            <li class="page_item page-item-7"><a href="http://localhost/wordpress/site1/">site1</a></li>
            <li class="page_item page-item-17"><a href="http://localhost/wordpress/site2/">site2</a></li>
            <li class="page_item page-item-14"><a href="http://localhost/wordpress/site3/">site3</a></li>
            <li class="page_item page-item-10"><a href="http://localhost/wordpress/site4/">site4</a></li>
          </ul>
        </div>

The first paragraph is the original code and the second is the output of the PHP-function. The only difference are the line breaks I added for readability. The CSS:

.headerNavMenu {
   width: 100%;
   border: 1px #a2a2a2 solid;
}

.headerNavMenu ul {
    text-align: justify;
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 90%;
    list-style-type: none;
   list-style-image: none;
   margin-left:auto;
   margin-right:auto;

}

.headerNavMenu ul::after {
  content: '';
  width: 100%; /* Ensures justification for single lines */
  display: inline-block;
}

.headerNavMenu li {
   display: inline;
   line-height: 100%;   
}

The CSS is applied equally on both parts of the code, but only the second one is displayed correctly. The first part is aligned left, with all links right next to each other without any margin. The only difference in the code I could detect were the line breaks. How do I fix that?

Thanks in advance!

  • And the generated markup is identical? – s_ha_dum Aug 28 '15 at 20:24
  • The second paragraph is the generated Markup + line breaks. – tilman151 Aug 31 '15 at 7:52
  • Yes, but other than the line breaks, which shouldn't matter, are the two identical? – s_ha_dum Aug 31 '15 at 13:56
  • Yes they are. I simply copied the generated Markup and pasted it in the code as the secon paragraph. – tilman151 Aug 31 '15 at 13:59
0

I found another way to do this:

.headerNavMenu {
    width: 100%;
    display: table;
    text-align: center;
    margin: 0;
}

.headerNavMenu ul {
    display: table-row;
}

.headerNavMenu li {
    display: table-cell;
    margin: 0;
}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.