JavaScript – How to customize WordPress menu items in the header

  • Home / Blog / JavaScript – How…

JavaScript – How to customize WordPress menu items in the header

I have created a WordPress menu and then displayed this menu in the header. The header contains a total of 6 pages or menu items. Now I want to display 3 of them on the left and the other 3 on the right. Because I’m weak at styling sheet styling I don’t know how to split this menu into two parts. The code for the header is:

<nav class="navbar navbar-expand-lg" style="background: #00C9C9;padding: 20px;">
    <div class="container">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" 
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

<?php
wp_nav_menu( array( 
'theme_location' => 'my-custom-menu', 
 'depth'             => 2,
            'container'         => 'div',
            'menu_class'        => 'navbar-nav mr-auto',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
              'list_item_class'  => 'nav-item',
'link_class'   => 'nav-link m-2 menu-item nav-active'
            )
);

?>
</ul>
</div>
</div>
</nav>

Write a Comment

Your email address will not be published. Required fields are marked *

x