Looking to customize the width of the Bootstrap 4 navbar overlay? Want it to adapt to its contents instead of occupying the entire screen when activated by clicking the hamburger icon. I've gone through the navbar, navbar-collapse, and navbar-nav classes along with some flex documentation but haven't quite figured out how to achieve this yet.
One way to take advantage of the navbar-toggler is by using it to handle elements outside of the navbar.
To do this, you can place a container outside of the navbar, insert a row inside that container, and add a col-auto within the row.
By placing the entire collapse navbar-collapse div inside that auto-column, you can achieve the desired functionality. The only downside is that for the expanded state of the navbar, you'll need to duplicate the navbar-item list inside the navbar.
Additionally, remember to include
style="margin-top: -1px !important"m-0 removes the default margin on the container)
Below is a functional code snippet (click "run code snippet" below):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-DISABLED navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img class="brand-icon mr-2" src="https://placehold.it/60" width="30" height="30" alt="">Company
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container m-0" style="margin-top: -1px !important">
<div class="row">
<div class="col-auto navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>When utilizing ASP.NET MVC 5, I encountered an issue within my view where I am attempting to incorporate "Edit | Delete" functionality within a table. Strangely, I am able to generate a hyperlink for the Edit function, but not for the Delete function. Wit ...
When using bootstrap 4 for layout, I discovered that the placement of google.visualization.ControlWrapper within or outside a bootstrap container can result in very different behavior. Here are two examples: Example with NumberRangerFilter: Outsi ...
Issue in Safari and Chrome browsers: CSS: TABLE { width: 100%; clear: both; border: 0px; border-collapse: collapse; } TABLE TH, TABLE TD { padding: 10px; text-align: center; border: 1px dotted #898989; } ...
I have noticed something strange with my app. When I use the CDN to load the bootstrap files, everything works perfectly. However, when I download the files and load them locally, the styling of one element, in particular, is off. The select box expands to ...
I have a div with a height of 105px. The image inside the div is 359px tall. How can I adjust the div's size to prevent cutting off the image and ensure it displays in full height? Thank you for your help! ...
When I click on the hello (plane geometry) as shown in the figure, a popup appears on the extreme left of the screen instead of appearing on the plane geometry box. Can someone please help me fix this issue? I have also included the code below: https://i. ...
I am struggling with my HTML and JavaScript files to collect data. Despite my efforts, the function is not executing properly. Below is the code I have been working on: HTML File : <form class="form-newsletter"> <div class="form-group"> ...
Below is a snippet of my HTML markup: <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Some contents </div> <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" > Some Content </d ...
How can I dynamically add internal margins between cards in a responsive layout? The following code ensures responsiveness: Large Screens display 4 Cards. Medium Screens display 3 Cards. Small Screens display 2 Cards. Micro Screens display 1 Card. &l ...
I'm having a bit of trouble with using react-bootstrap's NavDropdown in my NavBar to display a list of data. Sometimes, the list extends beyond the view and gets cut off at the bottom. I want to add overflow: auto to the list to make it scrollabl ...
Looking for the best way to display the popular red notification indicator with count in a consistent manner across various browsers. It seems tricky to achieve a design that looks seamless on all platforms, as different browsers interpret paddings differe ...
For debugging purposes, I need to output the IDs of all previous images in a check. The issue arises when trying to assign classes to all previous elements using the script below, as the images are not being added to the correct classes. $(document).on(&a ...
I'm puzzled by the behavior of the CSS code provided, which is also demonstrated in this fiddle. <style type="text/css"> p { font-size: 14px; } .percentage { line-height: 150%; } .em-and-a-half { line-height: 1.5em; } .decimal { ...
Is there a more efficient way to apply a specific background color to multiple columns in a table without using a CSS class for each column? I have a large table with many rows and columns, and I want to minimize unnecessary code. Currently, I am utilizi ...
I am currently working with the Bootstrap 4 grid system, and I have a specific layout in mind. I want to position an aside element along the right side of the screen. At the moment, my main content is enclosed in a col-xl-3 column. I would like the aside ...
Assuming I have the directory structure below: |--Views/ | --partial/ | --links.ejs | |--assets/ | --css/ | --styles.css | |--server.js Code for links.ejs <link rel="stylesheet" type="text/css" href="css/forms/switches.css"& ...
My portfolio includes an image slider called wow slider, which can be found at You can view my site with the image slider on this page: http://jackmurdock.site50.net/StudioWork.hmtl While most of the galleries display portrait and landscape images correc ...
I've been working on a real-time HTML highlighter that surrounds selected text with span elements containing a background property. Check out the fiddle here: https://jsfiddle.net/4hd2vrex/ The issue arises when users make multiple selections, leadi ...
Imagine having several div's on a webpage all with the ID of "Toggle". Each div contains two other smaller divs. "Headline" which is always visible. "Comment" which appears/disappears when the headline is clicked (initially hidden). How could I ac ...
Struggling to style the ten boxes individually? Renaming each class of the box child didn't work as expected? Wondering how to select and style each box with a unique background color? Also facing issues with displaying the logo image on the navigatio ...