Struggling with positioning of dropdowns on Bootstrap 4-alpha-2 navbar

The screenshot above showcases the responsive design functionality in Safari on OS X. The code snippet below demonstrates how the navbar is created, revealing that the dropdown menu on the right extends beyond the page. How can this issue be rectified?

<div class="container">
<nav class="navbar navbar-fixed-top navbar-light bg-faded" style="background-color: #ecf0f1">
    <a class="hidden-xs-down navbar-brand" href="/">
        Brand
    </a>
    <ul class="nav navbar-nav">

        <li class="nav-item hidden-sm-up">
            <a class="nav-link" href="#">
                <i class="fa fa-home"></i>
            </a>
        </li>

        <li class="nav-item">
            <div class="dropdown">
                <a class="dropdown-toggle nav-link"
                   id="user-menu"
                   data-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false"
                   href="#"
                >
                    <i class="fa fa-briefcase"></i>
                    <span class="hidden-xs-down">&nbsp;Work</span>
                </a>
                <div class="dropdown-menu"
                     aria-labelledby="user-menu"
                >
                    <a class="dropdown-item"
                       href="#"
                    >
                        <i class="fa fa-fw fa-wrench"></i>&nbsp;Services
                    </a>
                </div>
            </div>
        </li>

        <li class="nav-item">
            <div class="dropdown">
                <a class="dropdown-toggle nav-link"
                   id="user-menu"
                   data-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false"
                   href="#"
                >
                    <i class="fa fa-users"></i>
                    <span class="hidden-xs-down">&nbsp;Team</span>
                </a>
                <div class="dropdown-menu"
                     aria-labelledby="user-menu"
                >
                    <a class="dropdown-item"
                       href="#"
                    >
                        <i class="fa fa-fw fa-user"></i>&nbsp;People
                    </a>
                </div>
            </div>
        </li>

        <li class="nav-item">
            <div class="dropdown">
                <a class="dropdown-toggle nav-link"
                   id="user-menu"
                   data-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false"
                   href="#"
                >
                    <i class="fa fa-building-o"></i>
                    <span class="hidden-xs-down">&nbsp;Company</span>
                </a>
                <div class="dropdown-menu"
                     aria-labelledby="user-menu"
                >
                    <a class="dropdown-item"
                       href="#"
                    >
                        <i class="fa fa-fw fa-newspaper-o"></i>&nbsp;News
                    </a>
                </div>
            </div>
        </li>
    </ul>
    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <div class="dropdown">
                <a class="dropdown-toggle nav-link"
                   id="user-menu"
                   data-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false"
                   href="#"
                >
                    <i class="fa fa-user"></i>
                    <span class="hidden-xs-down">&nbsp;Username</span>
                </a>
                <div class="dropdown-menu"
                     aria-labelledby="user-menu"
                >
                    <a class="dropdown-item"
                       href="#"
                    >
                        <i class="fa fa-fw fa-inbox"></i>&nbsp;Inbox
                    </a>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-header">Events</div>
                    <a class="dropdown-item"
                       href="#"
                    >
                        <i class="fa fa-fw fa-calendar"></i>&nbsp;All Events
                    </a>
                    <a class="dropdown-item"
                       href="#"
                    >
                </div>
            </div>
        </li>
    </ul>
</nav>
</div>
csstwitter-bootstrapnavbarnavbootstrap-4

Answer №1

By simply including the class dropdown-menu-right to the dropdown-menu element, I was able to achieve the desired result.

<ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
        <div class="dropdown">
            <a class="dropdown-toggle nav-link"
               id="user-menu"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false"
               href="#"
            >
                <i class="fa fa-user"></i>
                <span class="hidden-xs-down">&nbsp;Username</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right"
                 aria-labelledby="user-menu"
            >
                <a class="dropdown-item"
                   href="#"
                >

Answer №2

To align the dropdown menu to the right, make sure to include the additional .dropdown-menu-right class in your HTML.

        <div class="dropdown-menu dropdown-menu-right"
             aria-labelledby="user-menu">
            <a class="dropdown-item"
               href="#">
                <i class="fa fa-fw fa-wrench"></i>&nbsp;Services
            </a>
        </div>

Check out the JSfiddle demonstration here

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

flexbox wrapping text styling

Can text be wrapped in flex within a fixed width container? For example: img username added you as a friend Instead of: user added img name you as a friend I am able to achieve this if the image and 'a' were separat ...

cssflexbox

Styling HTML elements for Google custom search API json results: Best practices

I have been working with the Google Custom Search API to retrieve JSON callback results for my project. I have been experimenting with the JSON callback variables based on the recommendations from Google's documentation available here: https://github ...

javascriptcssjsongoogle-apigoogle-custom-search

What is the best way to set up Storybook.js Webpack to support absolute image paths within CSS modules for a Next.js project?

I'm currently setting up Storybook to integrate with Next.js, Ant Design, Less, and TypeScript. In Next.js, images need to be stored in the public/ directory and linked using absolute paths for universal usage within the project. I am facing challenge ...

javascriptcsswebpacknext.jsstorybook

react-webcam npm package for optimizing video size

In my React app, I'm utilizing the npm package react-webcam. The <Webcam /> component is enclosed within a div with a dimension of {width: 100vw, height 100vh} I aim for the video element to adjust to the parent div's size and cover 100% ...

javascriptcssreactjswebcam

Using a Javascript array within a Bootstrap carousel allows for dynamic content to

I am looking to incorporate my javascript array into a bootstrap carousel so that the carousel can display all the elements from the array and determine which picture should be shown based on the data. I also want it to display the title, subtitle, and alt ...

javascriptbootstrap-4

Utilizing Vue.js for enhanced user experience, implementing Bootstrap modal with Google Maps autocomplete

I recently set up a Bootstrap modal that includes an <input>. To enable Google autocomplete for it, I utilized the commonly known trick below: .pac-container { z-index: 10000 !important; } However, I have encountered difficulty in getting the a ...

javascripttwitter-bootstrapgoogle-mapsvue.jsautocomplete

Tips for implementing Wordwrap on List Items within a Flexbox Setup

Here's a current look at the elements related to my query: Flexbox Layout I'm aiming to have the text inside the unordered-list elements wrap to the next line if it's too long. Currently, the entire list moves to a new line (refer to the 2n ...

htmlcssflexboxword-wrap

Bootstrap 3: the collapse button disappears on smaller screens

I am working on creating a responsive navbar using Bootstrap's collapse feature for small screens. Take a look at the code for my navbar: %nav{:class => "navbar navbar-default", :id => "nav_inicio", :role =>"navigation"} .container-fluid ...

cssruby-on-railstwitter-bootstrap-3

Creating an image rollover effect when hovering between two images

I am currently working with React and trying to change 2 images by hovering over them. Here is what I have accomplished so far: Card.js <div className="image-wrapper"> <img src={sprites.front_default} className="image" a ...

cssreactjsimagehoverrollover

`replace an element and its children with the same identifier`

For my project, I am attempting to dynamically load e-book chapter pages using ajax requests. Here is an example of the HTML markup I am working with: <html><body> <div id="p5"> <div id="p6"> <p class="heading">heading1</p ...

javascriptjqueryhtmlcss

Utilize the scrollIntoView method within a jQuery function

My current setup involves using JQuery's show and hide function. Essentially, when an image is clicked, it triggers the display of an information log. The issue I am facing is that this log opens at the top of the page, whereas I would like it to scro ...

javascriptjqueryhtmlcss

Tips for aligning an image within a CSS-created bar graph

Would it be possible to position an image inside each bar of a bar graph without changing the bar's size? I've figured out how to do this with text, but not with an image. Alternatively, would it be better to place the image to the left of each b ...

htmlcss

Animation using CSS that starts with a horizontal slide and transitions into a diagonal slide

Can I create an animation to move a graphic image on an html page from the middle of the screen to the top left corner? Here is what I have so far: #img1 {
 bottom: 50%;
 display: block;
 position: absolute;
 a ...

htmlcsscss-animations

How to align pagination in the center using Bootstrap

This code is for pagination features: <div class="pagination"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2< ...

htmltwitter-bootstrapcss

Does the CSS file load multiple times if it is being used on multiple pages?

I have a question regarding website performance. I am in the process of creating a 7-8 page website with a common CSS file used throughout. My concern is whether this CSS file will get loaded from the server every time I navigate to a new page, or if it ...

htmlcss.htaccess

Issues with jQuery Slider not functioning properly within asp.net webform

I have implemented an Awkward slider to display images for my article. I made some CSS modifications to change the design and it worked perfectly fine when used on an HTML page. However, when I tried using it with an ASP.NET web form, it failed to work fo ...

jqueryasp.nethtmlcssjquery-slider

showing sections that collapse next to each other

I am currently designing a portfolio website using HTML, CSS, and vanilla JavaScript. I have implemented collapsing sections that expand when clicked on. However, the buttons for these sections are stacked vertically and I want to place them side by side. ...

javascripthtmlcss

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

To modify the text within the pagination select box in ANTD, follow these steps:

Is it possible to modify the text within the ant design pagination select component? I have not been able to find a solution in the documentation. I specifically want to replace the word "page" with another term: https://i.sstatic.net/w55hf.png ...

javascripthtmlcssreactjsantd

Adjusting the color of an element in ReactJS as the user scrolls and hits a specific position

Is there a way to dynamically change the color of my header based on the background color as I scroll through different sections of my webpage? I have a fixed header and multiple sections with varying background colors. I want the header's text color ...

javascriptcssreactjs