Customize your Bootstrap 4 navbar to break and float on the right side for a

Is there a way to achieve a similar layout using Bootstrap 4, with centered menu items in the second row like this:

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

I successfully created this design with Bootstrap 3, but I'm struggling to replicate it with Bootstrap 4. The right navbar (Upgrade, govel, ...) fails to float and instead adds a scroll bar when space is limited.

Here's my Bootstrap 4 code: https://www.bootply.com/awN10dN1Ns

Can anyone offer advice on how to make the menu items flow into a second row if they can't fit on one line? And how can I center the menu items in that second row?

For reference, here's a link to the Bootstrap 3 example:

htmlcsstwitter-bootstrapbootstrap-4navbar

Answer №1

Kindly consider using the following CSS code snippet.

    #navbarSupportedContent {
        text-align: center;
        display: block !important;
    }

    #navbarSupportedContent ul.navbar-nav {
      display: block !important;
    }

    #navbarSupportedContent ul.navbar-nav li {
        display: inline-block;
    }

Answer №2

To achieve the desired layout, wrap the two rows in separate d-flex divs and use w-100 to ensure they fill the width of the navbar. Then, apply flex-column to the navbar to stack the two divs vertically.

<nav class="navbar navbar-expand-md navbar-light flex-column" id="header">
    <div class="w-100 d-flex">
        <a href="/" class="navbar-brand">
            <img src="/images/favicons/favicon_144x144.png" class="favicon-logo" alt="Logo">
        </a>
        <ul class="navbar-nav navbar-expand px-3 order-last">
            <li class="nav-item">
                <a class="nav-link text-nowrap nav-small-link" href="" title="Vorgemerkte Gebote auf Ihrer Bietliste">
                    <div class="icon-wrapper">
                        <i class="fa fa-gavel fa-fw"></i>
                        <span class="badge badge-orange" id="bidlist-counter">0</span>
                    </div>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap nav-small-link" href="" title="Merkzettel">
                    <div class="icon-wrapper">
                        <i class="fa fa-bookmark fa-fw"></i>
                        <span class="badge badge-orange" id="bookmark-counter">14</span>
                    </div>
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link text-nowrap dropdown-toggle" href="#" id="navbarDropdownLanguage" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="flag-icon flag-icon-de"></span>
                </a>
                <div class="dropdown-menu dropdown-langauge dropdown-menu-right" aria-labelledby="navbarDropdownLanguage">
                    <a class="dropdown-item text-nowrap" href="" hreflang="en">
                        <span class="flag-icon flag-icon-gb"></span> GB </a>
                </div>
            </li>
           [Rest of the code]
        </ul>

      [Continuation of the code]
        
    </div>
    <div class="navbar-collapse collapse w-100 justify-content-md-center justify-content-start" id="navbarSupportedContent">
        <ul class="navbar-nav">
          [Navbar content continues...]
        </ul>
    </div>
</nav>

Note: The hidden-* classes are not part of Bootstrap 4.

For more information, refer to: How can I have Brand and Navbar on separate lines?

Answer №3

Would you like to modify this?

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
}

Is this what you were looking for?

To organize your navigation, include the following:

@media (min-width: 768px) {
      .navbar-expand-md .navbar-nav{
        order:0
      }
    }

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

Why do all the select boxes require two clicks to open the drop-down menu when the function is activated?

After implementing this code on my webpage, I noticed an issue where all select boxes required two clicks from the user to open the drop-down menu. The first click seemed to set focus on the box, and only on the second click would the drop-down actually ap ...

javascripthtmlcss

Navbar in bootstrap appears to be flashing when it is in its expanded

Example Link On smaller screens, the bootstrap navbar menu does not collapse by default when clicking on a menu item. To fix this issue, I added attributes data-toggle="collapse" and data-target="#navbar-collapse" to each menu item so that the menu will ...

javascriptjquerycsstwitter-bootstrapnavbar

Is there a way to access the rear camera on a mobile device using webcam.js?

Currently, I am utilizing webcam.js from the following link: https://github.com/jhuckaby/webcamjs. When accessing the website on mobile devices, the front camera tends to open by default. My objective is to switch this default setting to access the rear ...

javascripthtmlgoogle-chromewebcam.js

Is there a bug in IE9 with CSS precedence?

Two CSS rules are in place: .avo-lime-table th, .avo-lime-table td { background-color: grey; } Next rule: .avo-lime { background-color: green; } All is functioning correctly in FireFox, Chrome, Opera and Safari. However, as usual, Microsoft&apos ...

cssinternet-explorerfirefoxoperator-precedence

Creating mobile-friendly buttons: a step-by-step guide

How can I make my button responsive? I have a button on an image within a slider. It looks good and works fine on desktop, but on mobile it appears too big and gets overlapped with the slider radio icons, causing the "read more" link button to not redirect ...

htmlcssresponsive-design

Place form at the center of the Bootstrap Modal

My question is, how can I center the entire form, including the input fields and labels, within the modal? Here is also a helpful Fiddle: http://example.com, although the snippet provided should work as well. <script src="https://example.com/bootstr ...

javascriptjqueryhtmlcsstwitter-bootstrap

The process of binding two variables in the same select element

Here is the code snippet that I am working with: <div class="form-group "> <label for="field_type"><b>Type</b></label> <div class="input-icon right"> <select required class="form-control" ...

javascripthtmlangularjs

Positioning a button beside an input field within a table row

This is how my current table layout appears. Table: https://i.sstatic.net/wcHuz.png I am attempting to position the small x button next to the input textbox. Here is the code I have written so far. <table class="table table-hover"> <thead ...

htmlcss

Canvas connectives (HTML5)

I have successfully implemented a user interface, but I am experiencing lower FPS during certain moments. After conducting a performance test with Firefox, I have realized that these FPS drops occur when the browser re-calculates CSS. The CSS recalculatio ...

javascriptcsshtmlcanvas

The issue with the functionality of the Bootstrap 4 navbar-toggler is causing a

I recently attempted to implement the bootstrap 4 navbar toggler function, but unfortunately, the toggle button did not produce any response (the demo on the official site works perfectly fine), and neither did the dropdown function. I've double-check ...

bootstrap-4nav

I found it challenging to select a particular choice using Selenium in Python

My goal is to use Selenium and Python to select the "Yazar" option within this particular HTML tag. However, I have encountered a problem where I am unable to successfully click and choose the "Yazar" option. Can anyone provide guidance on how to achieve t ...

pythonhtmlselenium-webdriverweb-scrapingautomation

The PrimeReact components are not displaying the PrimeReact theme properly

I'm currently working on integrating a Menubar component from PrimeReact into my React application. I tried to apply one of the predefined PrimeReact themes by importing it, but the page ended up looking strange. When I imported "./../../node_modules ...

javascriptcssreactjsprimereact

The transparent DIV/waiting message may not be displayed in IE10

Here is a DIV container that serves as a transparent background with a loading message. This is the HTML code for the DIV container: <div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: ...

jqueryhtmlcssajaxinternet-explorer-10

Testing the functionality and performance of JavaScript and HTML across numerous webpages using automated tools

Operating a webstore means offering several products to our customers. The checkout process is divided into four separate pages where users must enter their address, select a delivery method, and confirm their order across various URLs. Communication with ...

javascriptjqueryhtmltestingautomated-tests

Reposition the checked box to the top of the list

My goal is to click on each item, and the selected item should move to the top of the list and be rendered at the top. However, I encountered an issue where when clicking on an item, it moves to the top but the item that replaces it also gets checked. Bel ...

javascripthtmlcss

Clickable Parent URL in Bootstrap 5 Dropdown

I'm currently working on creating a Bootstrap 5 Navabar with a dropdown that appears on hover and allows the parent item to be clickable on screens larger than 992px. Successfully implementing the show on hover feature with the following JavaScript: ...

javascriptjquerytwitter-bootstrapbootstrap-5

How can I use JavaScript to loop through a specific attribute?

I have implemented ckeditor inline on a website I created. While it allows me to save data to a database, the issue arises when ckeditor automatically applies its own classes and attributes to certain elements where contenteditable is enabled. It also re ...

javascripthtmlcssloopsckeditor

Model-View-Controller (MVC) and

Apologies for my initial question, as I am new to this. I am having an issue with using a radiobutton for the first time. I want to create a radiobutton that looks like the image provided in the link below: My image When the radio button is checked an ...

htmlasp.net-mvcradio-buttondetailsview

What method does the browser use to select the srcset image for loading when no sizes attribute is included?

My website features an image that is displayed in various sizes depending on the browser dimensions: Since the website is responsive, the image's width can range from 200 to over 1000 pixels, depending on the size of the browser window. We aim to sho ...

htmlcssimageweb

Bx slider - displaying partially hidden slides at the far right while utilizing a full-width carousel

Implementing a slider on my nodejs website using bx slider has been quite an experience. Below is how I achieved it: $(document).ready(function(){ $(".bxslider").bxSlider({ minSlides: 1, maxSlides: 40, slideWidth: 300, ...

jquerycssbxslider