Design a dynamic responsive navbar with dropdown functionality

I need assistance creating a responsive navbar dropdown that expands to full screen when viewed on mobile devices. I attempted to position it to the right using "right: 0", but it only goes to the right of the toggle button. How can I make it go to the right side of the screen and expand to full screen? I am working with Bootstrap 4.

<!-- Button Group -->
<div class="col-6 col-sm-3 col-md-3 col-lg-2 d-flex align-items-center justify-content-end custom-button-group">
  <div class="row">
    <!-- Chat -->
    <div class="nav-item btn-group pl-1 ">
      <button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="far fa-comments"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
      </div>
    </div>
    <!-- End Chat -->
    <!-- Notification -->
    <div class="nav-item btn-group pl-1 ">
      <button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-bell"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">Lorem ipsum dolor sit amet consectetur adipisicing elit.</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
      </div>
    </div>
    <!-- End Notification -->
    <!-- User-->
    <div class="nav-item btn-group pl-1 ">
      <button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-user-circle"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
      </div>
    </div>
  <!-- End User--> 
  </div>           
</div>
<!-- END Button Group -->

View Image Here

htmlcssbootstrap-4

Answer №1

If I understood correctly, these suggestions could be beneficial:

To ensure the dropdown-menu is positioned correctly, consider including the following code in your stylesheet:


.dropdown-menu {
  top: calc(2em + 2rem + 2px) !important;
  right: 0 !important;
}
.nav-item, .btn-group>.btn, .navbar, div.justify-content-end.custom-grup-tombol {
  position: static !important;
}

Additionally, it might be helpful to add the following CSS rule to allow a line break in long text within dropdown-items:

.dropdown-item {
    white-space: normal;
}

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

Tips for aligning two canvases with different heights at the top in HTML5

My problem involves two canvases housed within a single <div>. Despite their different heights, they are currently aligned at the bottom. +-------+ + + +-------+ + + + + + + +-------+ +-------+ Is the ...

csshtml

Applying a background image to Django templates: Step-by-step guide

I am encountering an issue on my website where I need to insert an image as a background in a specific table cell. However, the image appears duplicated because it is smaller than the cell's width and height, causing an overlap effect. Even though I ...

htmlcssdjangodjango-templates

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Tips for making a sidebar sticky when scrolling

In order to keep the right-side bar fixed, I have implemented this javaScript function: <script type="text/javascript> $(document).ready(function () { var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsideb ...

javascriptcsshtmlposition

Having issues with Inline-Block functionality?

I am facing alignment issues with an image and a container placed next to each other. The rest of my website uses inline-block without any problems. If someone could provide guidance on how to resolve this, it would be greatly appreciated. Below is the s ...

htmlcss

FileReader and Socket.io uploader: each new upload builds upon the previous uploads

I have been working on integrating a file uploader using html5, js, and node which uploads large files in chunks. Everything works perfectly for a single upload. However, when attempting to upload again on the same page, it gets stuck in an endless loop wh ...

javascriptjqueryhtmlnode.jsfilereader

Exploring ways to customize the selected text color within a jQuery mobile division using CSS

Is there a way to change the color of selected text to #3C3 for the div one only and not for div two? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link ...

jquerycssjquery-mobilemobiletextselection

Removing a modal div element in React after navigating

import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import Cookies from "js-cookie"; const LoginPage = () => { const [email, setEmail] = useState( ...

javascripthtmlreactjsbootstrap-5

Is it possible to dynamically convert percentages to pixels in real-time?

I am working on a project with a fluid percentage-based horizontal grid and I want to have the same vertical margins as my horizontal ones. This is the code I have: .block_12_24{ display:inline-block; vertical-align:top; width:48%; margin-right:2%; margi ...

htmlcsssass

Display website when clicked

When creating a website similar to , one issue that I am facing is the ability to scroll down before clicking the "proceed as anticipated" button. This feature seems to defeat the purpose of having the button trigger an automated scrolling effect if users ...

javascriptjqueryhtmlcssshow-hide

Creating a customizable CSS selector in an Angular.js application

I'm currently developing a project in Angular.js involving a plane view where various objects are located. Every time a user drags an item from the left menu bar to the center of the screen, a new object is created. The unique CSS class for each item ...

htmlcssangularjs

Adjusting the layout of a webpage using CSS

I am facing a challenge where I need to adjust the layout of a webpage using CSS for mobile view. Currently, the desktop version has a sidebar floated to the left and a textbox floated to the right. The HTML structure is as follows: <div id="container" ...

csshtmlmobilemedia-queriespage-layout

Tips on activating the CSS style while typing using the onChange event in React

Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...

javascriptcssreactjs

Guide to making a segmented bottom border with html and css

I am working on styling a span for a restaurant name that requires a unique border-bottom design. I want to divide the border into two sections without overlapping the text below, similar to the image shown here: https://i.sstatic.net/bPvwQ.jpg Can anyone ...

htmlcss

The synchronization of template stamping with the connectedCallback function

Issue Explanation It appears that there is a timing discrepancy with Polymer (2.x) when querying for nodes contained within a template element immediately after the connectedCallback() function has been executed. Ideally, the initial call of this.shadowRo ...

javascripthtmlpolymerpolymer-2.x

Scrolling text blocks on mobile devices

When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have alre ...

javascripthtmlcssanimationscroll

Switching the background image dynamically in Vue.js upon page access

My goal is to update the 'background-image' when the page is accessed. export default { created () { document.getElementsByTagName('html')[0].style.background = "url('../assets/background-blur.png') center" } } //Logi ...

javascriptcssvue.js

Tips for changing text color using JavaScript when hovering the mouse?

I am working on a website for a snow cone stand and am looking to add a unique effect to their flavor list. I want to create an interactive experience where hovering over a flavor name scales the text and changes its color to match the real fruit. Is the ...

javascripthtmlcsssass

Switch up the picture when you press on it

I have a task involving a table where I want to switch out an image in the <td> when it is clicked, using a URL that I specify beforehand. The URL of the image will be provided when clicking on a link within the page. For example: index.html?type=d ...

javascripthtml

Issue with Javascript redirect not working following form submission in combination with Asp Classic

After countless hours of research and experimentation, I find myself at a standstill. My web page is coded extensively, so I'll do my best to provide a concise summary. The core elements of my ASP CLASSIC page for creating tickets via a form are as f ...

javascripthtmlasp-classic