Customizing Bootstrap Navbar: Ensuring the External Search Bar is displayed correctly within the expanded navbar

In my Bootstrap 5 navbar, I have a search bar, notifications dropdown, and collapsible buttons. How can I ensure that the search bar is visible in the expanded version of the navbar and hidden when the navbar is collapsed, while keeping the notifications dropdown always visible?

HTML:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
   <div class="container-fluid">
      <a class="navbar-brand" href="#">My Site</a>
      <form id="search" class="form-inline d-flex me-auto">
         <input class="form-control" type="search" placeholder="Search"
            aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Go</button>
      </form>
      <div class="d-flex">
         <div class="dropdown">
            <a class="btn btn-secondary me-1" role="button" id="dropdownMenuLink"
               data-bs-toggle="dropdown" aria-expanded="false">
               <div id="ex4">
                  <span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
                  <i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
                  </span>
               </div>
            </a>
            <div class="dropdown-menu dropdown-menu-end">
               <div id="notifications-header">
                  <h1>Notifications</h1>
               </div>
               <div id="notifications">
               </div>
            </div>
         </div>
         <button class="navbar-toggler ms-1" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
         </button>
      </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav">
            <li class="nav-item">
               <a href="#" class="btn btn-success ms-1 me-1 mt-2 mb-2">Button One</a>
            </li>
            <li class="nav-item">
               <a href="#" class="btn btn-secondary ms-1 me-1 mt-2 mb-2">Button Two</a>
            </li>
            <li class="nav-item">
               <form name="button-three" class="ms-1 me-1 mt-2 mb-2">
                  <button type="submit" class="btn btn-danger">Button Three</button>
               </form>
            </li>
         </ul>
      </div>
   </div>
</nav>

CSS:

#navbarSupportedContent {
  max-width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  max-width: -moz-fit-content;    /* Firefox/Gecko */
  max-width: -webkit-fit-content; /* Chrome */
  max-width: fit-content;  
}
    
.btn {
  white-space: nowrap;
}

https://jsfiddle.net/tL09xuoy/

Answer №1

To ensure certain items do not appear in the navbar on smaller screens, you can place them within a navbar-collapse division. If you have the notifications icon positioned between the search form and other links, separate collapse divisions are necessary. By modifying the navbar toggle to function with a class name (such as .dual-collapse), Bootstrap will collapse all elements.

To prevent specific elements from collapsing (like the notification icon), you can move them outside of the collapsing content using flex order.

I adjusted the collapse breakpoint from `sm` to `md` since the layout did not look optimal at the `sm` breakpoint, but you can revert this change if needed.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e908e908dc2c5d4c193">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1929e8394b1c3dfc8dfc0">[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="95f7fafae1e6e1e7f4e5d5a0bba5bba5b8f7f0e1f4a6">[email protected]</a>/dist/js/bootstrap.min.js"></script>

<style>
    #navbarSupportedContent {
        max-width: intrinsic;
        /* Safari/WebKit uses a non-standard name */
        max-width: -moz-fit-content;
        /* Firefox/Gecko */
        max-width: -webkit-fit-content;
        /* Chrome */
        max-width: fit-content;
    }

    .btn-width-md {
        width: 7.5rem
    }

    @media (min-width:768px) {
        .btn-width-md {
            width: auto;
        }
    }

    .btn {
        white-space: nowrap;
    }
</style>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
        <div class=" flex-grow-1">
            <a class="navbar-brand" href="#">My Site</a>
        </div>
        <div class="dual-collapse order-5 order-md-0 collapse navbar-collapse">
            <form id="search" class="input-group form-inline my-3 my-md-0 me-auto">
                <input class="form-control flex-grow-0 w-auto mr-md-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="button" id="button-addon2"><i class="fa fa-search"></i></button>
            </form>
        </div>

        <div class="dropdown order-2">
            <a class="btn btn-secondary me-1" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                <div id="ex4">
                    <span class="p1 fa-lg has-badge" data-count="0" id="badge">
                        <i class="p2 fa fa-bell xfa-inverse"></i>
                    </span>
                </div>
            </a>
            <div class="dropdown-menu dropdown-menu-end">
                <div id="notifications">
                    <ul class="list-unstyled ps-1">
                        <li><a href="#">Notification one</a></li>
                        <li><a href="#">Notification two</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="dual-collapse order-4 collapse navbar-collapse flex-grow-0">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="btn btn-success btn-width-md ms-1 me-1 mt-2 mb-2">Button One</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="btn btn-secondary btn-width-md ms-1 me-1 mt-2 mb-2">Button Two</a>
                </li>
                <li class="nav-item">
                    <form name="button-three" class="btn-width-md ms-1 me-1 mt-2 mb-2">
                        <button type="submit" class="btn btn-danger">Button Three</button>
                    </form>
                </li>
            </ul>
        </div>
        <div class="order-3">
            <button class="navbar-toggler ms-1" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse" aria-controls="dual-collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </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

Designate material for a particular table header element

Is there a method to pass content within a td-element to a specific th-element? I am working with a dynamic table and need to associate the content correctly under each table header. I have implemented pagination for the rows in the table. Currently, all ...

Using a locally hosted HTML page to update a JSON file stored on my computer

In my current project, I need to reorganize data stored in an array named unknown. Each item in this array needs to be moved either to a new array called good or another one called bad. let data = { "bad":[], "unknown": ["b", "a", "d", "g", "o", ...

Transforming a subnav bar into a dropdown on smaller screens

Hello everyone, I'm new here and seeking some guidance. Please bear with me if I seem a bit lost or naive. I am attempting to replicate the navigation bar from this website: WOHA. While I don't need it to be an exact replica, I have managed to cr ...

ng-bind-html is having trouble parsing the HTML correctly and binding it

Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...

Hey there, I was wondering if it's possible to modify the color of the navbar when scrolling on a specific page

After the first 3 pages with a black background and a transparent navbar with white navigation items, I encounter visibility issues when scrolling to the colorful 4th page. Is there a way to change the navbar color on this specific page using ONLY HTML a ...

Set dimensions for the input submit border inside

Can anyone help me figure out how to prevent the border from being drawn inside of my submit button element? I have a specific width and height set for cross-browser consistency, but in Firefox 15 and IE7 the border gets applied to the inside of the elemen ...

continuously refresh choices available for selection

I am looking for a way to dynamically populate the second select option based on the selection made in the first select option. While I know how to achieve this using traditional jQuery and HTML, I was wondering if there is a way to update options_for_sele ...

Delayed hover dropdown navigation menu powered by Bootstrap

I am experimenting with creating a bootstrap dropdown menu that opens and closes on hover, but only after a 250ms delay for desktop devices. Custom JavaScript: $(document).ready(function() { if ($(window).width() > 767) { $(".dropdown-toggl ...

The submission feature for the textarea in Javascript is not functioning properly

As someone who is new to frontend development, I am currently facing a challenge with debugging JavaScript code that involves making changes to the content of a textarea. Despite my efforts to debug using the browser console, I have yet to identify why it ...

Issue with Angular: boolean value remains unchanged

Currently, I'm encountering an issue with my application. My objective is to establish a list containing checkboxes that toggle their values between true and false when clicked. Sounds simple enough, right? Below is the HTML code snippet: <l ...

Having trouble getting the drop down menu to function properly using HTML and CSS

I attempted to implement a drop-down menu using the following codes. However, I am facing some issues as clicking on the drop-down menu does not open the sub-menus as expected. Is there a way for me to resolve this problem? <div id="control-panel& ...

Height not being applied to DIV container

I'm facing an issue with my CSS code that is causing images to break the row after reaching the end of the DIV. However, the container behind it is not adjusting its height according to the images. The height should expand along with the images. Here ...

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

Issue: I am facing difficulty aligning all elements within one div without any overflow issues. Even with the parent div set to overflow:hidden, some child divs are protruding out of the container. How can I resolve this problem? Example: http://jsfiddle. ...

JavaScript Age confirmation Overlay

I designed an age verification popup with the help of some online tutorials and a friend due to my limited knowledge of JavaScript. Check it out live here- My issue is that I want this popup to load/appear after the page content loads, but I'm not s ...

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...

Embed a local page into an HTML file using PhoneGap

I attempted to load a page within my phonegap application using Jquery .load(), but it isn't functioning because it's on a local machine rather than a server. When I eventually upload the app to PhoneGap Build, my page will still be located in th ...

Creating HTML tables dynamically using PHP

I am currently working on creating a dynamic HTML table by querying the database using PHP. I am facing some challenges in understanding how to combine two different loops to ensure the correct generation of the desired table. <table><tr> & ...

What is the best way to create a new column that wraps content from existing columns?

While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container. Note: I am aware that this can be achieved with grid as well, but I wanted ...

What is the best way to position a rectangle on top of a div that has been rendered using

I recently started using a waveform display/play library known as wavesurfer. Within the code snippet below, I have integrated two wavesurfer objects that are displayed and positioned inside div elements of type "container". My goal is to position my own ...

The Angular Ivy strictTemplates error message states that the type 'Event' cannot be assigned to the type 'InputEvent' parameter

I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...