Designing a navigation system using Bootstrap for my website.
I'm struggling to figure out the best way to space out the navigation link elements on my navbar so that it looks good on both desktop and mobile screens.
This is my current navbar code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="menu-main-nav" class="navbar-nav">
<li id="menu-item-42" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-42"><a href="XXX" class="nav-link">HOME</a></li>
<li id="menu-item-963" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-963"><a href="XXX" class="nav-link">SERVICES</a></li>
<li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">ABOUT US</a></li>
<li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
Currently, I have four navigation elements. Initially, I thought about adding width=25% to the nav-link class, but I am concerned about how it will affect the mobile view.
Additionally, if I end up adding a fifth item in the navigation bar (from WordPress Appearance > Menus), I need to find a way to make my code adapt to accommodate it.