Maintaining visibility of entries in collapsed Bootstrap 4 navbar/menu

This is a question that pertains to Bootstrap 4, similar to one found on Stack Overflow, but specific to this version.

I am struggling to include right-justified entries in the BS4 navbar that remain visible even when collapsed. I have spent an entire afternoon trying different approaches without success.

Below is a visual representation of what I am aiming for:

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

Here is my current code snippet (which works only when the navbar is not collapsed):

<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top">
    <a class="navbar-brand text-capitalize text-blur" href="/">
        <img class="mr-1" src="/images/logo/favicon-32x32.png" alt="Logo">
        <span class="">Portami in Pista</span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTopMenu"
        aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
        <span class="sr-only">[Menu]</span>
        <span class="navbar-toggler-icon" title="[Menu]"/>
    </button>

    <div class="collapse navbar-collapse" id="collapsableTopMen">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/Schools/">
                    <i class="fa fa-motorcycle fa-rotate-315 text-danger" aria-hidden="true"/>
                    <span class="text-blur-danger">PiP Reparto Corse</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/Tracks/">
                    <i class="fa fa-flag-checkered text-primary" aria-hidden="true"/>
                    <span>Piste</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/Blog/le-guide-del-giovedi/">
                    <i class="fa fa-mortar-board text-primary" aria-hidden="true"/>
                    <span>Le guide del gioved&#236;</span>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <!- START of section should be always visible -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="famfamfam-flags it" title="Italiano"/>
                    <span class="d-inline d-xl-none">Italiano</span>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownLang">
                    <a class="dropdown-item" href="/AbpLocalization/ChangeCulture?cultureName=en&returnUrl=/">
                        <i class="famfamfam-flags gb" aria-hidden="true"/>
                        <span class="">English</span>
                    </a>
                </div>
            </li>
            <!- END of section should be always visible -->

            <li class="nav-item">
                <a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"/> Log in</a>
            </li>
        </ul>
    </div>
</nav>
htmlcssbootstrap-4

Answer №1

Since you are utilizing Bootstrap 4, the following answer is particularly relevant to your query:
(specifically refer to the last section)

To ensure that the portion you always want visible remains distinct from collapsible elements, make use of the order-* classes to arrange items as required:

Check out the demonstration here: 

<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top justify-content-start">
    <a class="navbar-brand text-capitalize text-blur" href="/">
        <img class="mr-1" src="//placehold.it/32" alt="Logo">
        <span class="">Portami in Pista</span>
    </a>
    <button class="navbar-toggler order-2 ml-1" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
        <span class="sr-only">[Menu]</span>
        <span class="navbar-toggler-icon" title="[Menu]"></span>
    </button>
    <!-- 1st collapse menu -->

    ...

</nav>

For more details, check out this link:

Answer №2

I made a necessary adjustment to the solution provided by Zim.

The issue I addressed was with the "always visible" section of the menu, which wasn't covering the entire menu when collapsed.

By introducing a custom class called .navbar-always-overlapped, I was able to resolve this issue.

<nav class="navbar navbar-light navbar-expand-lg border-bottom mainmenu sticky-top justify-content-start">
    <!-- same code from Zim here>
    ...

    <!-- always visible portion. Note the 'navbar-always-overlapped' -->
    <ul class="navbar-nav navbar-always-overlapped order-1 order-lg-last ml-auto">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-flag it" title="Italiano"></i>
                <span class="d-inline d-lg-none">Italiano</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
                <a class="dropdown-item" href="#">
                    <i class="fas fa-flag-usa gb" aria-hidden="true"></i>
                    <span class="">English</span>
                </a>
            </div>
        </li>
    </ul>
    <!-- 2nd collapse menu -->
    <div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
            </li>
        </ul>
    </div>
</nav>

and the CSS for .navbar-always-overlapped:

.navbar-always-overlapped .dropdown-menu {
    position: absolute !important;
}

View the result at

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

Switch between the inner unordered list

Take a look at this Fiddle http://js-fiddle.net/jVfj5/ My goal is to have the Sub Categories (Nested Ul) display when I click on Services, while they are hidden by default. Additionally, only the ul under Services should open, not all the other ul's ...

jquerycss

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

javascripthtmlcssword-wrap

The width of the Div element cannot be consistently preserved in Safari when viewing on an iPad

I'm facing a peculiar issue that seems simple at first glance, but has me stumped. On a webpage using Bootstrap, there's a div with the following code: .appSection{ background-color: #000000; padding:20px; border:1px solid #67c1d ...

htmlcsstwitter-bootstrap

When the height is set to 100vh, the Div and Image appear misaligned vertically

Could someone explain why there is a vertical separation between the div and the image? <div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST </div><!-- --><img src="photos/openening.jpg" alt="SICK ...

htmlcssdisplayobject-fit

Utilize jQuery to animate the hiding of my right sidebar

Looking for help with implementing a jQuery animation to hide the right sidebar on my 3-columns page. I created a demo online here - JsFiddle: http://jsfiddle.net/yhfXX/ In my template, the columns are arranged as follows: menu (on the left) is fixed co ...

jqueryhtmlcss

The alignment of the floating left element is creating conflicts with the styling of other div

As I embark on a design project, I find myself juggling three divs for distinct products, alongside a payment method image div and a copyright div. The product divs are aligned to the left within their specific wrapper, ensuring they center and display sea ...

htmlcss

Is there a way to align the navigation menu options to the right side of the navbar?

I'm having trouble aligning the options in the navbar to the right side. Can anyone help me identify where I'm going wrong in my code? Here is the snippet I'm working with: <div> <nav class="navbar navbar-expand-lg navb ...

htmlcssweb-deployment

Is the position relative malfunctioning when using display table-cell?

I have designed a horizontal menu consisting of buttons that I want to resize in width so that together they occupy 100% of the menu container. I need them to function like TD elements inside a TABLE. Here is the code snippet I have developed: <div id ...

htmlcss

Is it possible to globally modify the component reference <dropdown-component> name in Angular during runtime in a dynamic manner?

I am currently working on an application that utilizes a component called "dropdown-component" throughout its pages. However, due to specific business requirements, I have been tasked with replacing "dropdown-component" with "custom-dropdown-component". Un ...

htmlangulartypescript

What is the best way to make a block fill 100% of a container-fluid?

Here is a block: <div class="container-fluid"> <div class="content_wrapper"> </div> </div> What's the best way to display the .content_wrapper block with 100% content width and margins from the body borders? ...

htmlcss

Foundation and equalizer do not provide an optimal user experience

I am new to using Foundation. Currently, I am utilizing Foundation 5 along with equalizer. I have a row with 2 columns - one containing text and the other containing an image. I want both columns to have the same height, so I am using data-equalizer. ...

javascripthtmlcssruby-on-railszurb-foundation

Only the Backdrop is triggered by Bootstrap Modal

I've been struggling to figure out why the bootstrap modal is not showing up after hours of troubleshooting. All the files and syntax seem correct, as I have compared them with another working site where the modal functions perfectly. I even disabled ...

javascripthtmltwitter-bootstrap

Automatically add a table row at the bottom displaying the overall calculation

I have data to display in an HTML table. The data is coming from a third-party server (PHP) using AJAX requests. The data is currently being displayed effectively with the following code: <table id="tbl-product"> <tr> < ...

jqueryhtmlajax

Creating a string of DIV elements with PHP and mySQL - is it possible?

I am in the process of creating a well-formatted product list using data from an SQL database. The goal is to have my website display a store layout with small boxes containing brief information about each product that, when clicked, will open up detailed ...

phpmysqlsqlhtmldivider

Overlay of white on top of an image

Is it possible to add a white overlay to an image using a greyscale filter in CSS? I need the overlay to be absolute positioned over the image with a white background and changed opacity setting. The catch is that I cannot use another div, so it has to be ...

htmlcss

How to deactivate user controls on a Google Maps embed

I am attempting to incorporate a basic Google map into my website using the embed feature available on maps.google.com. Below is the generated code: <iframe src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d2391.716465442018!2d-0.6309220000000 ...

htmlgoogle-mapsiframegoogle-maps-embed

How to align button text and other ion-col text at the bottom in Ionic 2

Here is the code snippet I am working with: <ion-row><ion-col ><button ion-button outline no-padding large (click)="setUserName()">D</button>ay in the life </ion-col></ion-row> I find the layout unattractive as the le ...

cssionic2

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

I am currently working on an HTML application that needs to fit perfectly within a designated space without causing any page level scrollbars. I have utilized flexbox styles extensively to achieve this, but unfortunately, I am facing compatibility issues w ...

htmlcssflexbox

PHP Form Submission: A Simple Guide

One scenario that I'm facing is using the submit button event to populate a field in my form with a value. However, now I'm having trouble getting the form to submit at the same time. Any suggestions on what I can do? Check out this link for mor ...

phpjqueryhtmljson

Using JavaScript and Tampermonkey to convert strings from an HTML element into an array

I am trying to change the names of months into numbers and place them in a table cell on a website. I thought using an array would make it easier to reference the month names by their corresponding array numbers, allowing me to add table tags before and af ...

javascripthtmlarraysgoogle-chrome