This WordPress website uses Bootstrap 4 and a version of Navwalker.
My client only views her website from her iPhone, and she doesn't want the menu to collapse. So, for her to see the entire menu links, I've had to make the fonts smaller, and she doesn't like that.
Now I am thinking if I could split the menu to be in two lines or at least have the links spill over into the next line when the screen is less than 450px, that would work for her.
Is there a way to do that with bootstrap/navwalker/wordpress?
Here is the header.php code for the navigation section:
<nav id="site-navigation" class="navbar navbar-expand navbar-light bg-light text-uppercase g-font-weight-400 g-pt-0--lg ml-auto">
<div class="container">
<div class="container g-pos-rel">
<!-- Navigation -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</div>
</div>
</nav>
And here is the resulting code as seen from view page source - for the navigation php section:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul id="menu-menu-1" class="navbar-nav mr-auto">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item active menu-item-307 nav-item"><a title="Home" href="https://www.christinezavod.com/" class="nav-link" aria-current="page">Home</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2106 nav-item"><a title="Artwork" href="https://www.christinezavod.com/additional-artwork/" class="nav-link">Artwork</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1621" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1621 nav-item"><a title="Creative Director" href="https://www.christinezavod.com/creative-director-allan-zavod-legacy/" class="nav-link">Creative Director</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1588" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1588 nav-item"><a title="Background" href="https://www.christinezavod.com/background-modeling/" class="nav-link">Background</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-316 nav-item"><a title="Contact Us" href="https://www.christinezavod.com/contact-christine-zavod/" class="nav-link">Contact Us</a></li>
</ul>
</div>
</div>
Note: None of the menu items have a drop-down submenu.
I guess one option would be to create two separate menus, and have them display just under each other, but I am actually not sure how to do that.
The best solution would be to somehow get the one menu to automatically split into a second row if the full menu list can't be displayed in the available width on smaller screens. (Keep in mind, she doesn't want the menu to collapse into the menu icon as per normal on smaller screens!)
Can anyone suggest how I can accomplish two lines of menu on a smaller screen?
Thanks for any advice.
SunnyOz
This should not need any modifications to how the menu is generated, just a change in the formatting.
The .navbar-nav class applies display: flex to the UL, so just add flex-wrap: wrap to allow the items to break into multiple rows