Expanding Bootstrap 5 navbar-nav to occupy entire screen space in collapsed state

Hello everyone, I hope you are doing well!

I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler.

While the toggler is functioning properly, I am having trouble making it fill the full width of the screen when toggled. Here is the code I have been working with:

https://i.sstatic.net/Quobw.png

/***** Top menu *****/

.navbar {
  background: #000;
  transition: all .6s;
  backface-visibility: hidden;
  height: 88px;
}

.navbar.navbar-no-bg {
  background: rgba(0, 0, 0);
}

.navbar-dark .navbar-nav {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  color: rgba(255, 255, 255, 1);
  border: 0;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link:focus {
  color: #fff;
  outline: 0;
}


.navbar-brand {
  width: 136px;
  background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
  border: 0;
  margin-left: 60px;
  text-indent: -99999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.navbar-nav {

  background: rgba(0, 0, 0);
  padding-top: 24px;
  margin-right: 70px;
  padding-bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;

}
<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d465b465845090418000959">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"></head>
<body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">
        <div class="container">
          <a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
          <button class="navbar-toggler"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#navbarCollapse>" 
            <span class="navbar-toggler-icon></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#top-content>About Us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#services>Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#about-us>Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#portfolio>FAQ</a>
              </li>
              <li class="nav-item">
                <button type="button" class="btn btn-primary mb1 btn-jpad>Request a quote</button>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999ecf7eaf7e9f4b8b5a9b1b8e8">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script></body>
</html>

javascripthtmlcssnavbarbootstrap-5

Answer №1

To resolve the issue, you have two options: either remove the container class entirely or reposition it so that it encapsulates your navigation bar. It seems like a deliberate design choice to make the collapsible section smaller, but making this adjustment should correct it.

/***** Top menu *****/

.navbar {
  background: #000;
  transition: all .6s;
  backface-visibility: hidden;
  height: 88px;

}

.navbar.navbar-no-bg {
  background: rgba(0, 0, 0);
}

.navbar-dark .navbar-nav {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  margin: 0 auto;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  color: rgba(255, 255, 255, 1);
  border: 0;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link:focus {
  color: #fff;
  outline: 0;
}


.navbar-brand {
  width: 136px;
  background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
  border: 0;
  margin-left: 60px;
  text-indent: -99999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.navbar-nav {

  background: rgba(0, 0, 0);
  padding-top: 24px;
  margin-right: 70px;
  padding-bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4a9b4aab7fbf6eaf2fbab">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

</head>
<body>
<div class="container">
    <nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">

          <a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
          <button class="navbar-toggler"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#top-content">About Us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#services">Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#about-us">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#portfolio">FAQ</a>
              </li>
              <li class="nav-item">
                <button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button>
              </li>
            </ul>
          </div>
 
      </nav>
          </div>
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d465b465845090418000959">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>      
</body>
</html>

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

Leveraging jQuery for Custom Form Styling

.I prefer to utilize personalized form elements in my forms. <fieldset> <legend id="Cities">Urban Areas</legend> <div class="legend-underline"></div> <div class="filters" id="Cities-filters"> <div> < ...

jqueryhtmlforms

Chrome and Firefox: Images cling together

I've encountered an issue with my recently launched website. Some images in a grid appear to be stuck together, but this problem only occurs in Firefox and Chrome browsers. Oddly enough, zooming in to around 110% then back to 100% seems to temporarily ...

javascriptcsswordpressgoogle-chromefirefox

What is the best way to implement a unique function in an angularjs directive?

Is it possible to execute a custom function when clicking on the checkbox of a table row shown below? I am using the Angular Smart Table directive and need to be able to store the rowid or another property of the rows when the checkbox is clicked. app.dir ...

javascriptangularjs

Ways to collect email address or name from an email message

Suppose I send an email to someone with a link at the bottom. The text of the link might be something like click me. When the user clicks on this link, they will be directed to a webpage. On this webpage, a message saying "Thank you" will be displayed a ...

javascriptphpjqueryhtmlemail

Encountering a PHP issue while attempting to embed Google Trends into an HTML element

I am encountering an issue while attempting to assign the html property of a jquery element to embed Google Trends. <!DOCTYPE html> <html> <head> <title>Titlw</title> </head> <body> <div class="hide ...

phphtmljqueryajaxgoogle-trends

Sending an object from Rails to Javascript

My MapsController is def show @outlet=OUtlet.all render 'maps/map' end In the view page map.html.erb, I iterate through each outlet to display their latitude and longitude: <% @outlet.each do |product| %> <%= product.latitu ...

javascriptruby-on-railsarraysruby

Stopping the webdriver in Node.js gracefully without crashing it can be achieved through a

Can the selenium webdriver be halted without terminating node? I've encountered a problem attempting to create an API tool that conducts web automation upon receiving a get request. Essentially, I am executing the selenium webdriver on a get request ...

javascriptnode.jsseleniumselenium-webdriverwebdriver

Obtain a specific element in Puppeteer JS by utilizing the waitForSelector function to detect when its class name changes

I am faced with a situation where I need to wait for a specific element to change its classes dynamically. The challenge arises when utilizing the waitForSelector function, as it fails to work when no new element is added to the DOM. Instead, it is the &l ...

javascriptnode.jsweb-scrapingnext.jspuppeteer

Syntax Error: The function `loadReposFromCache(...).error` is not defined in this building

I'm currently attempting to utilize the SyntaxHighlighter v4 plugin, but I'm facing issues with the build process! While following the guidelines provided here, an error popped up: $ ./node_modules/gulp/bin/gulp.js setup-project [10:12:20] Requ ...

javascriptpluginsgulp

Strange Node.js Issue

I don't have much experience with node.js, but I had to use it for launching on Heroku. Everything was going smoothly until a few days ago when suddenly these errors started appearing. Error: /app/index.jade:9 7| meta(name='viewport', co ...

javascriptnode.js

The search for 'partition' in 'rxjs' did not yield any results

Recently, I attempted to incorporate ng-http-loader into my Angular project. After successfully installing the ng-http-loader package, I encountered an error during compilation. The specific error message displayed was: export 'partition' was ...

javascriptangularnpmrxjs

Whenever I try to install the PostCSS plugin in Tailwind CSS and run "npm run build," an error always pops up. I've attempted to troubleshoot multiple times without success. Any suggestions on what I should try next?

When using Windows PowerShell, the following commands are executed: cd D:\TailwindCSS cd gs3 npm run build Output [email protected] build D:\TailwindCSS\gs3 postcss ./src/tailwind.css -o ./public/tailwind.css internal/modules/run_m ...

csstailwind-csspostcss

Adjusting the layering of a nested element within a container div using

I am facing an issue with two buttons placed within a container div that is being overlapped by another container div. The bottom container overlaps the top one, rendering the buttons unclickable. I have been trying to find a solution to make the buttons ...

htmlcss

How to extract a variable from a mongoose find method in a Node.js application

Within my Node.js program, I utilize my Mongoose database to query for a specific value in a collection, of which there is only one value present. var myValueX; myCollection.find(function(err, post) { if (err) { console.log('Error ...

javascriptnode.jsmongoose

Locate a specific element within an array and retrieve its corresponding index

Need help updating a boolean property for all objects in an array with the same user ID. I've outlined my MVC framework below in a concise manner. Model: var posts = [{id:1, user_id:1, is_following:true}, {id:2, user_id:1, is_cool:true}, ...

javascriptangularjs

Ionic: How come my image is not loading with HTTP.GET?

I have been attempting to populate a gallery in my Ionic application by fetching images from a JSON file, but I am encountering issues. While following a guide on creating a grid-like image gallery using the Ionic framework (https://blog.nraboy.com/2015/03 ...

javascripthtmlangularjshttpionic-framework

TreeView Filtering

I have encountered an issue while trying to utilize a treeview filter. Below is the method I have created: var tree = [{ id: "Tree", text: "Tree", children: [ { id: "Leaf_1", text: "Leaf 1", childre ...

javascriptarraysreactjsrecursion

Is your email showing up with an unknown sender when using the display function?

I'm facing an issue where the name entered in the input field on a contact form is not being displayed after submitting the email. The headers in PHP were changed and now it shows "unknown sender" instead of the name that was entered. How can I fix th ...

phphtmlemail-validation

Compel a customer to invoke a particular function

Is there a way to ensure that the build method is always called by the client at the end of the command chain? const foo = new Foo(); foo.bar().a() // I need to guarantee that the `build` method is invoked. Check out the following code snippet: interface ...

javascripttypescriptdesign-patterns

Extract specific nested elements

Looking for assistance with extracting specific nested objects from a series structured like so: data = {"12345":{"value":{"1":"2","3":"4"}}, {"12346":{"value":{"5":"6","7":"8"}}, {"12347":{"value":{"9":"0","11":"22"}} In need of creating a functio ...

javascript