Adaptable navigation options

So, I've been facing a challenge with my Bootstrap 4 navigation bar. The nav-items are going right across the navbar but I want the spacing between each nav item to adjust based on the viewport size to prevent any items from falling outside of view. It's similar to what you see here:

I tried setting the padding between the nav items in ems, but that didn't work. I also attempted to justify the text, but the padding still doesn't adapt.

Below is the CSS code:

.mynav .myBrand {
  color: #fff;
  font-size: 36px;
}

.navbar {
  -webkit-backface-visibility: hidden;
  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;
}

// More CSS Code Here...


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454203a223a25">[email protected]</a>/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f59f848090878cb5c6dbc3dbc5">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54dfcacfdbde">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ec19d83889d95bcafc2cbc1aecac2dad5">[email protected]</a>/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>
        <!-- More Links Here -->
      </ul>
    </div>
</nav>

htmlcssbootstrap-4responsive-designnavbar

Answer №1

If you use fixed values, they will not adjust based on screen size. Utilizing em, which relies on the font-size, may not be effective if the font-size remains constant.
To address this issue, consider creating a flex-row layout and arranging the elements spaced-around as detailed here.

For a practical demonstration, see below.

.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;

...

<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/img...
              </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure you watch the video until the end before moving to the next carousel in Bootstrap

I need my carousel to pause at the end of each video before transitioning to the next slide. The code I have loops through the media files in my database to create the carousel. <div id="mediaCarousel" class="carousel slide" data-ride="carousel ...

javascriptjqueryhtmltwitter-bootstrapcarousel

Looking for ways to incorporate both external and internal styling using jQuery and CSS in my template?

I've been working on a django project for a while now, and I'm facing some challenges with getting external and internal CSS to work. Only inline CSS seems to be functioning properly. I have two questions: How can I get external or internal C ...

jqueryhtmlcssdjangodjango-crispy-forms

What could be causing my canvas to not display my sprite?

Currently, I am in the process of learning JavaScript and experimenting with creating games to make the learning experience more enjoyable. However, I am facing an issue while using EaselJS and CreateJS to develop these games as a beginner. I need some as ...

javascripthtmlcanvaseaseljscreatejs

Troubleshooting Challenges in JavaScript/jQuery Hangman Game

Having trouble with my hangman game's game loop. Attempting to replace correct letters as the game runs through the word, but it's currently: looping through the word checking if the guessed letter is in the word returns index[0] Tried splitti ...

javascriptjqueryhtmlloops

Incorporate visual elements such as images that resemble checkboxes

I'm searching for an innovative approach to replace the traditional checkbox, incorporating images instead. My idea is to have users click on an image, which will then fade out and reveal a tick box overlay. My inspiration comes from Recaptcha 2, whe ...

javascriptjquerycsshtml

What is the best way to add color to the "ngx-star-rating" component?

I've been experimenting with the ngx-star-rating plugin, and I've tested different approaches like fill and color, but nothing seems to be working! Can anyone provide suggestions on how to change the star rating color from yellow to a different c ...

cssangularbootstrap-4

What is the best way to retrieve the column name from a specific MySQL table and store it in an

Is there a way to extract column names from a MySQL database? I have been able to retrieve column names using the following code: Array ( [id] => id [BSPKey] => BSPKey [PrintPost] => PrintPost [Barcode] => Barcode [FirstName] => FirstName [ ...

phphtmlmysqlselect

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...

cssreactjstypescriptnext.jsvercel

Angular 2: Change Boolean value depending on a condition

I find myself facing a challenge with a search-bar feature. My goal is to display all the filtered names when the input value reaches a length of 2 or more characters. After successfully extracting the value.length from the input field, I encountered a ro ...

javascripthtmlangularjsangularboolean

Is it possible to track keystrokes without the use of text input fields?

For various unimportant reasons, I need to use JavaScript to create links instead of using the anchor tag. I want the behavior to mimic the anchor tag, allowing users to open a link in a new tab when holding down the Ctrl key or in a new window when holdin ...

javascripthtmlhyperlinkwindowinternet-explorer-9

CSS - the styling properties of the class should not affect the child components

I am working on a Parent component that contains two child components. Each component utilizes accordion-groups for its functionality. I have created a specific class for styling purposes in my stylesheets, but I want this class to only apply to the parent ...

cssangular

Leveraging ng-class with an Angular $scope attribute

My HTML structure includes: <div class="myDiv"> <div style="width:200px; height:200px;background-image:url('img/200x200/{{largeImg}}.png');" ng-class="{'magictime foolishIn': 1}"> <span> { ...

javascriptjquerycssangularjs

Is there a way to customize Firefox's default styles similar to Chrome's?

Can you change the default styles of Firefox to match those of Chrome? ...

htmlcssgoogle-chromefirefox

What is the best way to utilize an onClick on a button to update a value that is being utilized in a useEffect hook?

I am looking for a way to dynamically change the content displayed in this section without navigating to another page. I have two sets of data - one displaying all blogs and the other showing only blogs authored by "mario". How can I implement a button cli ...

javascripthtmlreactjs

Tips for creating CSS from the Google Chrome inspector for future use

Hey there, I spent the evening debugging my JSF page and noticed some changes in appearance when checking/unchecking options in Google Chrome Inspector. I want to create a new CSS file based on these checked options and save it for use in my web applicat ...

cssgoogle-chrome-devtools

A workaround for background-size in Internet Explorer 7

Currently, I am working on a project at this link: Everything seems to be functioning well in Firefox and Chrome, however, I have encountered an issue with the background-size property not being supported in IE7. I heavily rely on this property throughout ...

cssinternet-explorer-7

Troubleshooting WordPress 4.4 Image Issues: Understanding the Conflict between Srcset and Bxslider

We have several company websites that use Wordpress along with a Genesis installation, a custom Genesis child theme, and bxslider for image sliders. When we view the slider on Firefox, we notice a responsiveness issue that we believe is caused by the new ...

jquerycsswordpressbxslidergenesis

Exploring HTML attributes with Nokogiri

Below is the code snippet that I've been working with: location = block.xpath("*/img") puts location Upon execution, the code provides the following output: <img src="/images/p.gif" height="1" width="0"> My objective is to extract the widt ...

htmlrubynokogiri

bootstrap radio button that cannot be deselected

I have created a btn-group as shown below: <div class="control-group"> <label class="control-label">Gender</label> <div class="controls"> <input id="filtro_sexo" ty ...

htmlformstwitter-bootstrapradio-button

How can I connect a JavaScript function with a Bootstrap Text Input Modal?

My webpage contains a basic Bootstrap Modal with a text input field, which I want to display when the "Report A Bug" button is clicked. <div class="btn-group" id="exampleModal" role="group"> <button id="myBtn ...

javascriptbootstrap-4