Prevent a specific item in the navbar from collapsing when toggling the menu

My Bootstrap 4 navbar includes items on both the left and right sides. Take a look at the full version below:

https://i.sstatic.net/zqxzI.jpg

And this is how it appears when collapsed.

https://i.sstatic.net/UmvK0.jpg

My goal is to have the Sign Up button aligned with the collapse toggle button on the right side. Is this achievable, and if so, how can it be done?

Here is the relevant snippet of the code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler ml-lg-5 ml-md-5 ml-sm-5" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="navbar-nav ml-lg-5 ml-md-5 ml-sm-5">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
            </ul>
        </div>
            <button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button>
</nav>

Answer №1

To position the button on the right, apply the float-right class directly. You can also adjust the float based on different screen sizes by referring to the official documentation

Alternatively, you can use the Hide and Show approach for different breakpoints. In this case, you will need two buttons structured like this:

<button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5 d-none d-lg-block d-xl-none" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button>
<button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5 float-right d-lg-none d-xl-block" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button>

The first button will be displayed only on large screens (lg) with the class d-none d-lg-block d-xl-none

The second button will only be visible on small screens below lg, using the class d-lg-none d-xl-block along with the float-right class for right alignment.

For additional options, refer to this resource

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

Can Phonegap be utilized to port a PlayN game to iOS?

PlayN seems like a fantastic tool for creating Html5 games. I'm curious to know if there are any plans to ensure that the html/javascript output is compatible with Phonegap, ultimately allowing for the creation of an iOS executable? ...

Tips for ensuring the middle row remains sandwiched between the header and footer rows in Bootstrap

After adding styles for img with max-height:100% and max-width:100%, the display looked fine with just images. However, upon further inspection, I noticed that if the middle row (which can contain one or two columns side by side) has multiple images or an ...

Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal. https://i.sstatic.net/BqqTX.jpg This represents my current progress in achieving that goal. https://i.sstatic.net/unQY9.jpg On the left side, I have an image with a fixed height. The aqua color fills the left s ...

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

When visiting on a smartphone browser, you may notice that instead of one menu icon, three icons appear. Upon inspecting the elements, you will find that there are three div's that look like this: <div class="responsive-menu-icon">&l ...

What is causing the align content property to not function as expected in this situation?

Is it expected for the flex items of the .center-section-container to be closer together when using this property? They do not seem to be affected at all. I have applied flex wrap so the items are now in different lines but too far away from each other, I ...

How can we add up the sum with just one click and then display the

Is there a way to calculate numbers within specific DIV boxes and display the total in a separate DIV when a box is clicked? I've attempted different methods, including enclosing the code within the window.onclick function. Check out my code on this J ...

Display text on the screen with a customized design using JavaScript's CSS styles

I need help with printing a specific page that contains some information designed in print.css. I want to print this page, including an image, with the same style. function printContent() { var divContents = document.getElementById("terms").innerH ...

Guide to updating 2 iframes simultaneously with a single link/button using HTML and JavaScript

Just joined the community and looking for help on how to refresh two different iframes within a single page. I came across a solution on Google that involves using getElementById. However, I've heard Firefox can be tricky with IDs. Appreciate any as ...

Troubleshooting the issue of Bootstrap 4 scrollspy failing to update active navbar items

I have been working on a Bootstrap 4.0 landing page and trying to implement ScrollSpy without success. The active menu items are not changing as expected. Here is the code snippet from index.html: <body> <!-- Navbar --> <nav id="main-nav" ...

Step-by-step tutorial for making a mesmerizing fade out grunge background

How can I achieve a fading grid background effect? I have experimented with using a conic-gradient for the background, but I am unsure how to make it fade out. background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0) 0 0/50px 50px; ...

Is there a way to mimic this type of scrolling effect?

Upon visiting this website, it is evident that the entire interface has been constructed with React. The scrolling experience on this site is exceptionally smooth, although it may feel slightly more substantial than a typical scroll. After researching onli ...

Incorporating Content-Disposition headers to enable the file to be both downloaded and opened

I'm having trouble allowing users to both view and download files on a web page. I've tried setting headers and using JavaScript, but can't seem to get it right. My goal is to have an HTML page with two links for each file - one to open in ...

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

I have integrated a horizontal scrolling date selector on my website, and it is functioning well. However, I am facing an issue while trying to change the CSS properties of a clicked date link using jQuery. Despite successfully firing the click event, I am ...

Adjust color scheme of drop-down menu

Having trouble changing the background color for my drop down menu. I tried to change the color for the sub div but it's not working. Can anyone help me fix this issue? Here is the code snippet: http://jsfiddle.net/3VBQ6/4/ #nav li:hover ul.sub li { ...

Mandatory tick box needed for submitting PHP form

Although the topic of PHP form validation is frequently discussed, I am a complete beginner in PHP and I am currently experimenting with a PHP form script that I discovered here. As a result, I am unsure about how to proceed with incorporating two specific ...

I am experiencing an issue where my ajax code is unable to display the

After spending countless hours trying to make this work, I find myself stuck. I've set up a simple guestbook page and have created this code to generate a JSON file: <?php /* Constants for database settings */ define("DBHOST", "localhost"); defin ...

Change the appearance of a div based on the presence of a certain class within a child div using jQuery styling techniques

I'm trying to set a default padding of 15px for div.content, but if it contains a child div.products-list, I want the padding to be removed. I've looked into solutions using jquery, but nothing seems to work. Here's how my layout is structur ...

Overflow causes flexbox to become unreactive

Implementing the overflow style on a flexbox element appears to negatively impact its responsiveness. Here is the corresponding code snippet: .projects-wrapper{ display: flex; flex-wrap: wrap; justify-content: center; text-align: center; width ...

Using JSON data to populate the jQuery UI Datepicker

Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018? P.S. return [!(month == 8 && day == 27), 'highlight', highlight]; - This example demons ...