Is it possible to automatically collapse the Bootstrap navbar when the viewport is not wide enough?

Currently, my navbar is styled with a "shrinkwrap" background to match the width of the content:

        <nav class="navbar fw-bold h5 rounded-5 navbar-expand d-inline-flex">
            <div class="container-fluid">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <NavLink class="nav-link" :to="{ name: 'Home' }">Home</NavLink>
                    </li>
                    [...]
                </ul>
            </div>
        </nav>

By default, Bootstrap collapses the navbar at a predefined pixel width, like 992px with .navbar-expand-lg:

https://i.sstatic.net/xOdZl.gif

However, I want the navbar to collapse only when the viewport is not wide enough to contain it, as shown when the horizontal scrollbar appears in this image:

https://i.sstatic.net/GeBkK.gif

Is it possible to achieve this using Bootstrap styling? It seems to be oriented towards specific fixed pixel breakpoints rather than adapting to natural content width.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

To make use of the predefined values, you must define them beforehand. Even if you opt not to compile the sass files, you can still utilize the default break points.

Referencing :

<nav class="navbar fixed-top navbar-expand-sm">..</nav>
  • navbar-expand-sm = mobile menu on xs screens <576px
  • navbar-expand-md = mobile menu on sm screens <768px
  • navbar-expand-lg = mobile menu on md screens <992px
  • navbar-expand-xl = mobile menu on lg screens <1200px
  • navbar-expand = never use mobile menu
  • (no expand class) = always use mobile menu

If needed, a custom breakpoint (???px) can be set by adding some CSS.

For instance, defining 888px:

@media (max-width: 887.98px) {

    .navbar-expand-my>.container,
    .navbar-expand-my>.container-fluid,
    .navbar-expand-my>.container-sm,
    .navbar-expand-my>.container-md,
    .navbar-expand-my>.container-lg,
    .navbar-expand-my>.container-xl {
        padding-right: 0;
        padding-left: 0
    }
}

@media (min-width: 888px) {
    .navbar-expand-my {
        flex-flow: row nowrap;
        justify-content: flex-start
    }

    .navbar-expand-my .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-my .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-my .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem
    }

    .navbar-expand-my>.container,
    .navbar-expand-my>.container-fluid,
    .navbar-expand-my>.container-sm,
    .navbar-expand-my>.container-md,
    .navbar-expand-my>.container-lg,
    .navbar-expand-my>.container-xl {
        flex-wrap: nowrap
    }

    .navbar-expand-my .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-my .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }

    .navbar-expand-my .navbar-toggler {
        display: none
    }
}

If you choose to compile your sass files as mentioned above, you have the option to include your customized breakpoints in this variable:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  custom: 888px,
  lg: 992px,
  xl: 1200px
) !default;

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

Pressing a button through xpath

I am attempting to click on the button below: <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <div class="ui-dialog-buttonset"> <button class="ui-button ui-widget ui-state-default ...

pythonhtmlseleniumxpath

Update the table contents smoothly using the html helper PagedListPager without having to reload the entire

I am struggling with a specific line of code that utilizes the html helper's PagedListPager: @Html.PagedListPager(Model.kyc_paged_list, page => Url.Action("ClientDetails", new { id = ViewBag.ID, kyc_page = page, transaction_page = Model. ...

javascriptc#htmlasp.nethtml-helper

Exploring anchor hover effects and navigating adjacent sibling elements

Consider this html structure: <p><a></a></p> <div><a><img></a></div> To hide all images inside a div after a p tag, you can use the following code: p + div {display:none;} However, attempting to sho ...

htmlcsshover

Exploring the 3D Carousel Effect with jQuery

After creating a 3D carousel using jQuery and CSS3, I am looking to enhance it with swiping support. While there are plenty of libraries available for detecting swipes, I specifically want the carousel to start rotating slowly when the user swipes slowly. ...

javascriptjqueryhtmlcss

"Exploring the Relationship Between Parent and Child Elements in CSS

Is it possible for an id to act as a parent in CSS? For instance: <div id="link"> <a href="www.example.com"></a> </div> The CSS code: #link > a{ /* style would be applied here*/ } Can this actually be achieved? ...

htmlcss

What could be causing the issue where only the latest data is being shown

When I use ajax to retrieve data from my database, the console.log displays all the results correctly, but in my HTML, only the last result is shown. What could be causing this issue? Any help would be appreciated! Thanks! Please keep your response simple ...

javascriptphphtmlajax

What is the reason behind the android code being incompatible with IOS operating systems?

I'm encountering an issue where a particular code is working on Android, but not on IOS. The code in question involves using JavaScript to differentiate the items in a list within an HTML select tag. It's perplexing to me how the code can operat ...

javascriptandroidhtmlios

Creating dynamic buttons based on a list: A step-by-step guide

Is there a way to dynamically generate and display buttons based on the number of elements in a list? I currently have a hardcoded implementation, but sometimes my list only contains two elements (button 1 and button 2) so I don't need the additional ...

htmlangularionic-frameworkbuttonionic3

What is the best way to track the loading progress of an AJAX page in WordPress?

On my WordPress blog, I utilize a plugin known as Advanced Ajax Page Loader. This handy tool loads the next page or post through AJAX and then places it in a specific div on my site. However, I am now interested in incorporating a progress bar to show the ...

phpjqueryhtmlajaxwordpress

What is the recommended Vue js lifecycle method for initializing the materialize dropdown menu?

https://i.stack.imgur.com/cjGvh.png Upon examining the materialize documentation, it is evident that implementing this on a basic HTML file is straightforward: simply paste the HTML code into the body and add the JavaScript initializer within a script tag ...

javascripthtmlcssvue.jsmaterialize

The placeholder is invisible

After thoroughly researching this topic, I am still stumped as to why my Placeholder is not appearing. I would greatly appreciate any insights or expertise you can provide to help me understand what I might be doing incorrectly. <input type="text" name ...

htmlcsswebplaceholder

The Glyphicon icon fails to appear on the initial page load and only shows up after refreshing the

I have been utilizing bootstrap.min.css from bootstrap v3.3.5 which I downloaded from http://getbootstrap.com and used it locally. However, I encountered an issue with glyphicons when running it on IE 9 and above. The glyphicon icon disappears on the first ...

javascriptjqueryhtmlcsstwitter-bootstrap

How about a CSS one-by-one black pixel that's not opaque?

I've been attempting to achieve a 70% transparent black background on an element, but unfortunately, I had to use a pixel to address browser compatibility problems. Using CSS alone would make the entire content of the element transparent as well. Her ...

htmlcss

Access the inner element with Selenium WebDriver in Java

Looking for a way to automate clicking the 'Download' button on a pdf-viewer page using Selenium? Check out this html code snippet from the page: https://i.sstatic.net/5qUtT.png To access the element enclosed within the red frame, you may need t ...

javahtmlselenium-webdriverxpathpdf-viewer

Creating distinctive ng-form tags within a form using ng-repeat in Angular

I need help with creating a form that includes a table looping over a list of objects. Each object should have checkboxes for the user to check/uncheck attributes. The issue I am facing is setting the ng-model attribute on the checkboxes. This is what my ...

javascripthtmlangularjsangularjs-ng-repeat

Concealing Vimeo's controls and substituting them with a play/pause toggle button

I'm currently working on implementing the techniques demonstrated in this tutorial (), but unfortunately the code in the fiddle I put together doesn't appear to be functioning correctly. I'm at a loss as to what might be causing this issue. ...

javascriptjquerycss

Replacing inline CSS with styled components in Next.js Sass modules

In order to display emoji icons in my Next.js App, I utilize the Twemoji library. These emojis are rendered as <span><img></span> elements in the final HTML output. To customize their default width and height, I use the !important rule in ...

htmlcssnext.jscss-modules

One cool CSS trick: altering a div's background color with hover!

I'm working on creating a div that acts as a link to another page. My goal is to have the entire background color of the div change to blue when someone hovers over it. I want to achieve this effect using CSS only, as I am not sure if javascript will ...

htmlcss

What is the proper file format for a form action in CSS?

What I Currently Have: In my Index.html file, there are a total of 4 form elements including text fields and a dropdown. Upon submission by the user, the data is processed in confirm.html using a separate JavaScript file for formatting before being displa ...

javascripthtmlcss

Output MySQL information into an HTML form with radio buttons and an additional text field

Users are able to input product data into a MySQL database through my web form. They can choose between three main suppliers using radio buttons (Sigma-Aldrich, VWR, and Filter-Service), or select 'other' and specify a different supplier in a tex ...

phphtmlmysqlsql