Responsive nav-items

Question

Ok this is a real challenge and I have searched everyehere. I have created a Bootstrap 4 navigation bar. The navigation bar has nav-items goung right across the navbar: I am wanting the SPACING between each nav item to adapt according to the viewport size-so no items fall outside of view-a bit like here: https://carrabbasatlanticcanada.com/

I have tried setting the padding between the nav items in ems-but this did not do the trick. I also tried justifying the text but the padding still does not adjust.

Here is the code:

 .mynav.myBrand { color: #fff; font-size: 36px; }.navbar { -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; width: 100%; background-color: rgba(0, 0, 0, 0.6); padding: 30px 0 30px 0; } /*link*/.navbar.navbar-nav li a { color: #fff; font-size: 25px; font-weight: 600; font-family: Helvetica, Arial, Verdana, sans-serif; text-transform: uppercase; }.navbar-nav.nav-link:hover { color: #cda45e; } /*link hover color*/.navbar-nav.nav-link:focus { color: #fff; outline: 0; } /*link focus color*/ /*Nav item spacing*/.navbar-nav>li { padding-right: 9em; } /*Hamburger*/.custom-toggler.fa-solid { width: 80px; color: #fff; margin: 6px 0; }.custom-toggler.fa-solid:hover { width: 80px; color: orange; margin: 6px 0; } /*Dropdown arrow*/.dropdown-toggle::after { display: inline-block; width: .3em; height: .3em; margin: -.3em 0 0 -.1em; vertical-align: middle; content: ""; border: .3em solid; border-width: 0.15em.15em 0; transform: rotateZ(45deg) } /*Dropdown menu*/.dropdown-menu #myList a { color: #000; font-size: 14px; padding: 30px; } #navbarNav li a:hover { color: #cda45e; background-color: transparent; -webkit-transition: all.2s ease-in-out; -moz-transition: all.2s ease-in-out; -o-transition: all.2s ease-in-out; -ms-transition: all.2s ease-in-out; transition: all.2s ease-in-out; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css /bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-expand-lg mynav " id="navbar_top"> <div class="container-fluid"> <a class="navbar-brand myBrand pl-xl-5" href="index.html">Web Title</a> <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa-solid fa-bars fa-xl" style="width:40px"></i> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#top-content">Top</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <,--Dropdown Menu Start-links could be to pdf. image or webpage--> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#about-us" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="d-lg-flex align-items-start justify-content-start" id="myList"> <div> <a class="dropdown-item pb-3" href="#lunch"><img src="assets/images/img1;jpg" alt="menu image">&nbsp.LUNCH MENU</a> <a class="dropdown-item pb-3" href="#dinner"><img src="assets/images/img1;jpg" alt="menu image">&nbsp.EVENING MENU</a> <a class="dropdown-item pb-3" href="#"><img src="assets/images/img1;jpg" alt="menu image">&nbsp.DESSERT MENU</a> </div> <div> <a class="dropdown-item pb-3" href="#drinks"><img src="assets/images/img1;jpg" alt="menu image">&nbsp.DRINKS MENU</a> <a class="dropdown-item pb-3" href="#BOOK"><img src="assets/images/img1;jpg" alt="menu image">&nbsp;BOOK A TABLE</a> </div> </div> </div> <!--Dropdown Menu End--> <li class="nav-item"> <a class="nav-link" href="#portfolio">Work</a> </li> <li class="nav-item"> <a class="nav-link" href="#testimonials">Clients</a> </li> </ul> </div> </nav>

Answer 1

When you give fixed values it won't change according to screen size. Using em which is dependent on font-size won't work if the font-size isn't changing.
You need to create a flex-row and have the elements spaced-around you can read more here .

Working example bellow.

 .mynav.myBrand { color: #fff; font-size: 36px; }.navbar { -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; width: 100%; background-color: rgba(0, 0, 0, 0.6); padding: 30px 0 30px 0; } /*link*/.navbar.navbar-nav li a { color: #fff; font-size: 25px; font-weight: 600; font-family: Helvetica, Arial, Verdana, sans-serif; text-transform: uppercase; }.navbar-nav.nav-link:hover { color: #cda45e; } /*link hover color*/.navbar-nav.nav-link:focus { color: #fff; outline: 0; } /*link focus color*/ /*Nav item spacing*/ /*.navbar-nav>li { padding-right: 9em; } */ /*Hamburger*/.custom-toggler.fa-solid { width: 80px; color: #fff; margin: 6px 0; }.custom-toggler.fa-solid:hover { width: 80px; color: orange; margin: 6px 0; } /*Dropdown arrow*/.dropdown-toggle::after { display: inline-block; width: .3em; height: .3em; margin: -.3em 0 0 -.1em; vertical-align: middle; content: ""; border: .3em solid; border-width: 0.15em.15em 0; transform: rotateZ(45deg) } /*Dropdown menu*/.dropdown-menu #myList a { color: #000; font-size: 14px; padding: 30px; } #navbarNav li a:hover { color: #cda45e; background-color: transparent; -webkit-transition: all.2s ease-in-out; -moz-transition: all.2s ease-in-out; -o-transition: all.2s ease-in-out; -ms-transition: all.2s ease-in-out; transition: all.2s ease-in-out; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-expand-lg mynav " id="navbar_top"> <div class="container-fluid"> <a class="navbar-brand myBrand pl-xl-5" href="index.html">Web Title</a> <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa-solid fa-bars fa-xl" style="width:40px"></i> </button> <div class="collapse navbar-collapse" id="navbarNav"> <,-- Change the ul bellow --> <ul class="navbar-nav justify-content-around flex-grow-1"> <li class="nav-item"> <a class="nav-link" href="#top-content">Top</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <.--Dropdown Menu Start-links could be to pdf; image or webpage--> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#about-us" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="d-lg-flex align-items-start justify-content-start" id="myList"> <div> <a class="dropdown-item pb-3" href="#lunch"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;LUNCH MENU</a> <a class="dropdown-item pb-3" href="#dinner"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;EVENING MENU</a> <a class="dropdown-item pb-3" href="#"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;DESSERT MENU</a> </div> <div> <a class="dropdown-item pb-3" href="#drinks"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;DRINKS MENU</a> <a class="dropdown-item pb-3" href="#BOOK"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;BOOK A TABLE</a> </div> </div> </div> <!--Dropdown Menu End--> <li class="nav-item"> <a class="nav-link" href="#portfolio">Work</a> </li> <li class="nav-item"> <a class="nav-link" href="#testimonials">Clients</a> </li> </ul> </div> </nav>