Stop objects from collapsing in the toggle feature of Bootstrap 4 navigation bar

I have a bootstrap 4 navigation bar with a font awesome icon-shopping cart that I want to keep near the menu bar instead of toggling into the default responsive navbar. How can I achieve this?

HTML:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.php">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Meniu
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="meniu.php">Pizza</a>
                <a class="dropdown-item" href="#">Paste</a>
                <a class="dropdown-item" href="#">Supe</a>
                <a class="dropdown-item" href="#">Ciorbe</a>
                <a class="dropdown-item" href="#">Desert</a>
            </div>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <p class="dropdown-item">0746117702</p>
                <p class="dropdown-item">0742112452</p>
                <p class="dropdown-item">0735212352</p>
            </div>
        </li>
    </ul>
    !!!<a href="#"><i class="fas fa-shopping-cart fa-lg" style="color: white;"></i></a>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>
</div>

htmlcsstwitter-bootstrapbootstrap-4navbar

Answer №1

To properly align non-collapsible items, it's important to group them in a single div and utilize spacing and order utilities as needed.

For an example of how this can be achieved, visit: https://www.codeply.com/go/SJia0JtI1T

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">English Park Cuisine</a>
    <div class="d-flex order-lg-1 ml-auto pr-2">
        <a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
        <ul class="navbar-nav flex-row">
            <li class="nav-item mx-2 mx-lg-0">
                <a class="nav-link" href="#">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="index.php">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Menu
            </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="menu.php">Pizza</a>
                    <a class="dropdown-item" href="#">Pasta</a>
                    <a class="dropdown-item" href="#">Soups</a>
                    <a class="dropdown-item" href="#">Broths</a>
                    <a class="dropdown-item" href="#">Dessert</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <p class="dropdown-item">0746117702</p>
                    <p class="dropdown-item">0742112452</p>
                    <p class="dropdown-item">0735212352</p>
                </div>
            </li>
        </ul>
    </div>
</nav>

Explore more about alignment and layout issues with Bootstrap 4 Navbar items here: Bootstrap 4 - Navbar items outside the collapse

Answer №2

Reposition your shopping cart outside of the navigation collapse div and enclose both in a new div structure. Then, customize the styling of the shopping cart independently so it remains visible even when the navigation collapses.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.php">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div> <!-- New Div !-->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Meniu
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="meniu.php">Pizza</a>
                <a class="dropdown-item" href="#">Paste</a>
                <a class="dropdown-item" href="#">Supe</a>
                <a class="dropdown-item" href="#">Ciorbe</a>
                <a class="dropdown-item" href="#">Desert</a>
            </div>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <p class="dropdown-item">0746117702</p>
                <p class="dropdown-item">0742112452</p>
                <p class="dropdown-item">0735212352</p>
            </div>
        </li>
    </ul>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>
</div>
    <!-- Move the anchor tag out of the original div but keep it nested inside the new div for continuity -->
    !!!<a href="#"><i class="fas fa-shopping-cart fa-lg" style="color: white;"></i></a>
</div>

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

The periodLookup array does not have a defined value for periodStr. Why is this error being caught?

Here is a method that I am working with: set_period_help_text: function(periodInput){ var metric = MonitorMetric.getSelectedMetric(); var periodStr = $('select[name=metric_period]').val(); var datapoints = Number(periodIn ...

javascripthtml

What is the best way to eliminate the border from a GTK entry (textbox)?

I am trying to remove the border completely. This is the code I have attempted: GtkCssProvider *provider = gtk_css_provider_new (); gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider), "entry, .entry, GtkEntry { border-width:0px ; }", -1 ...

csscuser-interfacegtkgtk3

Display the PDF without providing the option to download

When clicking on any of the PDF links, it will open in a new tab with options available in the PDF reader. https://i.sstatic.net/2bVB7.jpg I am looking to disable only the download button within the PDF. To elaborate further, a client will upload their ...

javascriptphphtmlgoogle-chromepdf

Adjust the message background color once it has been viewed

One of the buttons attached to a mat-menu has a red background when clicked. If you want to see it in action, check out this Stackblitz. .list-item.error { background-color:#FCE8FF; } However, if the button is clicked more than two times, the color sh ...

javascriptcssangulartypescript

The setInterval function for the automated image slider is experiencing issues and is not functioning properly

I am facing an issue where the third photo in the slider does not appear initially. Eventually, the slide fails completely, causing the photos to change rapidly. Strangely, after the slide fails, the third photo sometimes appears sporadically. I am puzzl ...

javascripthtmlcss

Positioning the image to appear behind the Canvas

As I near the end of the game, I'm encountering an issue where the background image overlaps the Canvas. How can I resolve this problem? -Translated by Google Link to game Link to game with background ...

javascripthtmlcsscanvas

Conceal and reveal div elements using hyperlinks

Hey everyone, I've been working on some code that allows me to show and hide divs by clicking on links. The issue I'm facing is that when I try to view a specific div (like the third one), it appears below the invisible divs instead of at the top ...

javascriptjqueryhtmlcss

In a scenario where two elements have the same value of float:right;, which element will take priority?

When I have two div elements with similar parent location and both positioned float:right using the style attribute, how can I determine which one will appear more to the right than the other? I want to ensure that div1 is always the furthest right, follow ...

htmlcss

Encountering a problem with the mouseup event

Hey there, I've got this code up and running smoothly but I'm looking to make a tweak. Is there a way to have the script halt on the mouse up event? Currently, it displays coordinates as you drag over an image, but I'd like it to only show ...

javascriptjqueryhtmlcsssvg

Tips for sending all form elements via ajax without explicitly mentioning their names

I'm developing an application with a dynamic form generation feature. When a button is clicked, I need to send all the form elements to another page using Ajax. The challenge is that since the form is generated dynamically, I am unable to specify elem ...

htmlajax

Combining cells for certain entries in an Angular data table

Just starting to learn angular, and here's the scenario I'm dealing with: I have a table consisting of 10 columns. Let's say column 4 contains different status categories like children, teen, young, adult, and senior. When displaying all ...

htmlsqlangulartypescript

Designing a unique modal, unexpectedly encountering a white border surrounding the custom modal

I am trying to create a welcome modal that I can import into my MainScreen.js file and integrate it there. However, no matter how I style the modal, a white surface always appears around it despite my attempts to make it look like a "popup window". Below i ...

javascriptcssreactjsreact-native

Creating a Phonegap hybrid application that uses JavaScript redirection can cause an absolute positioned element to intermittently blink, revealing the content that lies

Currently, I am developing a Cordova project for both iOS and Android platforms. Within my project, I have two main pages: index.html and home.html. Each page contains an absolute positioned div (with loading feature) that is visible by default. Here is t ...

javascriptjqueryioscsscordova

Update the visibility of an element depending on the current date

I am creating a website for local use on my tablet and I prefer not to use PHP. I have multiple divs that should be shown on different days like this: - div 1 shows today - div 2 shows tomorrow - div 3 shows the day after tomorrow etc... I found some code ...

javascriptphpjqueryhtmlcss

How to Display Bootstrap Grid Layout with Unique Customization

After working extensively with Bootstrap Grid and creating a layout, I found that I was unable to print exactly what was being displayed on the web page without any changes. Despite trying various methods of using JavaScript to add custom CSS codes for pri ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

The Bootstrap collapse functionality is malfunctioning

Bootstrap is not my strong suit. I'm struggling with getting the collapse effect to work properly. Can anyone provide some guidance? Here is the link to the bootstrap I am using: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boo ...

htmlbootstrap-4

Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes? <div style="width: 100%; display: flex"> <div id="firstColumn" ...

cssvue.jscss-animationscss-transitions

Chrome method for creating Flexbox columns of equal height

I am implementing a simple 2-column layout and I want to utilize Flexbox to ensure equal heights for the columns: HTML <div class="row flex"> <!-- menu --> <div class="col-xs-4"> <aside> Menu content wi ...

htmlcssgoogle-chromeflexbox

Transform HTML content into a PDF document

I am dealing with a string that contains HTML data and my goal is to convert it into a PDF using ASP.Net. After searching support pages and using Google extensively, I have not been able to find a straightforward snippet of code for this common task with a ...

htmlasp.net.netpdf

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Currently, I am utilizing the row class in Bootstrap which contains two columns, one for X and one for Y. There are scenarios where either the X column, the Y column, or both may be present within the row. Since a row can have up to 12 columns, when only t ...

htmlcssbootstrap-4