Bootstrap 4 Navbar with Collapsible Menu and Fixed Dropdown Menu

0
votes

I'm a beginner and I'm trying to create a navbar on bootstrap 4 that changes it's display on a mobile device

On a full-width display, I want the

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

On a tablet display, I want the

  1. Logo (centred)
  2. Links (left-aligned and collapsed into hamburger menu)
  3. Profile picture dropdown menu (right aligned) - essentially unchanged

I have managed to achieve most of what I want, except when clicking the hamburger menu, the profile picture menu gets pushed down, which is not what I want.

https://www.bootply.com/6a0BWZivYL

My question is, how do I fix the profile picture dropdown menu to the right-side.

I have tried moving the code for navbar-collapse collapse after the profile picture, which works for when in tablet display, but produces undesirable results in full-width display. Namely that it is no longer right-aligned.

I haven't been able to find any specific examples of this online. The closest I have found https://bootsnipp.com/snippets/gmQR0. This difference is that I don't think I need two collapsible menus, just the 1 collapsible + 1 fixed dropdown menu.

1
csstwitter-bootstrapbootstrap-4

1 Answers

1
votes

In the given design you have kept profile UL below the button div navigation list.

Please place it before button and change the class from float-md-right to float-right.

Add float-left class to button to make alignment left.

Edit

First design the nav-bar for small screen, then add media queries for dropdown-link to float right.

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