Responsive Navbar with Collapsible Menu and Sticky Dropdown Navigation in Bootstrap 4

As a beginner, I am working on designing a mobile-responsive navbar using Bootstrap 4. Here is my vision for how it should appear on different devices:

For full-width displays, the layout should include:

  1. Logo (aligned to the left)
  2. Links (also aligned to the left)
  3. Profile picture dropdown menu (aligned to the right)

On tablet displays, the layout should change to:

  1. Logo (centered)
  2. Links (left-aligned and collapsed into a hamburger menu)
  3. Profile picture dropdown menu (still right-aligned) - with minimal changes

While I have made progress in implementing most of this design, there is an issue when clicking on the hamburger menu. It causes the profile picture menu to shift downwards, which is not intended.

To view the current state of the navbar, visit: https://www.bootply.com/6a0BWZivYL

My main question is regarding how to keep the profile picture dropdown menu fixed to the right side?

I have attempted to rearrange the code for navbar-collapse collapse after the profile picture section, which resolves the issue on tablets but disrupts the alignment on full-width displays.

Despite searching online, I haven't discovered examples precisely addressing this problem. The closest match I found can be viewed here: . However, this example includes two collapsible menus whereas I aim to have only one collapsible menu alongside a fixed dropdown menu.

csstwitter-bootstrapbootstrap-4

Answer №1

You have arranged the profile UL below the button div navigation list in the provided design.

It is recommended to move it above the button and update the class from float-md-right to float-right.

To align the button to the left, add the float-left class to it.

Edit

Start by designing the nav-bar for small screens first, then apply media queries for the dropdown link to float right as needed.

<head>
<style>
       @media(min-width:769px){
            .drop-class{
                 position: absolute;
                 right: 20px;
            }
        }

</style>
</head>

<body>
    <div>
        <nav class="navbar navbar-expand-lg navbar-light">
            <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>

            <a class="navbar-brand" href="#">Navbar</a>

            <div class="dropdown drop-class">
                <a class="dropdown-toggle" href="#" 
                 id="navbarDropdownMenuLink" data-toggle="dropdown" 
                aria-haspopup="true" aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" 
                 aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another 
                     action</a>
                    <a class="dropdown-item" href="#">Something else 
                     here</a>
                </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>

            </ul>
        </div>
        </nav>

    </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

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

javascripthtmlcss

The Bootstrap class "text-right or text-end" does not seem to be functioning properly when applied to the <a> element

I've been attempting to apply the text-right or text-end classes to the anchor element at the end, but for some reason, it's not working as expected. I even tried using style="text-align:right !important;", but it still doesn't pro ...

htmlbootstrap-4bootstrap-cards

Scrollbar visibility issue

Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link. HTML: <div class='container'> <div class='fix' /> </div> CSS: body { margin: 0; } .container ...

htmlcssscrollbar

Strategies for Displaying Additional Years in a Datepicker

Currently, I am utilizing the bootstrap datepicker on my website. However, I have noticed that when I open the dropdown to change the year, it only displays a range of 20 years - the current year, along with 10 years before and after. I would like to modi ...

c#bootstrap-4datepicker

Why doesn't the <img> with the class "w-100" fit inside the parent flex div if the <img> is smaller than the parent div in Bootstrap 4?

I've been racking my brain over this issue, but I just can't seem to find a solution. So here's the scenario: Adding an image with a width of 100px to a desktop site, and applying the w-100 class should make it stretch to match the width of ...

twitter-bootstrapbootstrap-4

What is the best way to expand the width of my Bootstrap 4 navbar dropdown menu?

Need help creating a full-width dropdown for a Bootstrap 4 navbar using the standard boot4 Navbar? Check out the navbar template I am currently working with. Here is an example of how I want it to look: Desired design image link <nav class="navbar fix ...

htmlcssbootstrap-4

Problem with jQuery expanding the container when clicking "Read More"

I'm working on a script to collapse and expand a div based on click events. The code below is functioning correctly, but the container always starts off expanded when the page loads. I want to reverse this behavior so that the div is collapsed when th ...

javascriptphpjqueryhtmlcss

Switch Button Hyperlink in HTML/CSS

I have the following code: document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList ...

javascripthtmljquerycssanimation

using CSS to create responsive designs with multiple divs

After spending hours searching, I am still struggling to get two divs to sit next to each other at 50% width each, with a third div below that spans 100% width. The challenge is to make the layout responsive, so that when the screen size is reduced to arou ...

csshtml

Issues with integrating React-Bootstrap onto components

Just started working on a new React application and decided to incorporate react-bootstrap. After running npm install react-bootstrap bootstrap, I noticed that the Column, Row, and Button tags were not functioning properly even though the react-bootstrap ...

javascriptreactjstwitter-bootstrapreact-bootstrap

Rotate the text 180 degrees on hover using either jquery or css

One of our clients is requesting a flip effect on the menu items of their website. When hovered over, the items should flip upside down on the horizontal axis and then return to their original position. An example similar to what they're looking for c ...

jquerycsstextflip

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

Changing the text of a link when hovering - with a transition

Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled. HTML <div class="bot-text"> <a href="">Visit this site</a> ...

javascriptjqueryhtmlcss

The styling of the electron button is rather peculiar

It's puzzling how the colors on my buttons seem to disappear, despite thorough investigation of the computed results revealing no unusual settings. Could this be a MacOS-related issue that I am overlooking? https://i.sstatic.net/NbcqW.png I've ...

htmlcssmacosbuttonelectron

What is the best way to add an element to multiple websites while avoiding the inheritance of their styles?

Is there a way to add a select element with my own styling to various websites? Many of them have heavily styled their existing select elements, which do not have any classes. How can I ensure that my customized select does not inherit the styles from the ...

css

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

javascriptjqueryhtmlcss

Issue with Bootstrap 4 anchor links not leading to intended target

I recently built a one-page index page using Bootstrap 4, complete with a navbar containing hyperlinks that smoothly navigate to different sections of the page. For example, the "Events" nav link takes users to the section identified by id="events&quo ...

htmlcssbootstrap-4navigationanchor

Is there a CSS fix for containing a floating div inside another div with overflow hidden?

I've managed to create a cool effect with a div of an airplane inside a parent div that has 'overflow: hidden' applied. This setup gives the illusion that the airplane div is flying from under an element on the page and carrying a banner alo ...

css

Update the less mixin

I attempted to eliminate the border radius from all Bootstrap elements by creating a custom-mixins.less file with the following lines in it. My intention was for these lines to overwrite the original .border-radius mixin, but unfortunately, it did not work ...

csslessmixins

Enhance your navigation bar with hover styles in React Router Dom v6

I'm having an issue with my navbar where the active styles are overriding the hover state. I want to maintain my hover state styles even on the active nav link. How can I achieve this? Here is what's currently happening: Active nav styles (look ...

cssreactjsnavbarreact-router-dom