Tips for resolving issues with dropdown menu placement

Here is the current state of my HTML and CSS code:

<div class="header">
<div class="container-fluid">
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10"></div>
    <div class="col-1 dropdown">
      <button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        Menu
        <i class="fa fa-bars"></i>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">About </a>
        <a class="dropdown-item" href="#">Education</a>
        <a class="dropdown-item" href="#">Hobbies</a>
        <a class="dropdown-item" href="#">Contact</a>
      </div>
    </div>
  </div>
</div>


.header{
position: relative;
top: 20px;
}

.dropdown-menu {
min-width: 120px !important;
height: 145px !important;
position: relative;
right: 0;
}

body {
background-color: lightblue;
}

I am looking to shift the dropdown menu to the right instead of the left like in this image, but currently, it appears as in this image.

htmlcssbootstrap-4dropdown

Answer №1

If you're using bootstrap, there's no need for any custom css to create a dropdown menu.

By default, a dropdown menu is positioned 100% from the top and along the left side of its parent. To right-align the dropdown menu, add .dropdown-menu-right to a .dropdown-menu.

Check out more details here: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

Want to see a demo? Click here: https://jsfiddle.net/7aso841L/

<div class="header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-1"></div>
      <div class="col-10"></div>
      <div class="col-1 dropdown">
        <button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">About </a>
          <a class="dropdown-item" href="#">Education</a>
          <a class="dropdown-item" href="#">Hobbies</a>
          <a class="dropdown-item" href="#">Contact</a>
        </div>
      </div>
    </div>
  </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

Opt for JavaScript DOM manipulation over jQuery for element selection without depending on jQuery

I am attempting to target a specific element using JavaScript: element = '<div class="c-element js-element">Something Here</div>'; When I try to select this element with the following code: $(element) The result is not as expected ...

javascriptjqueryhtml

Pick the item when the checkbox is selected

I am currently attempting to toggle the visibility of a select element based on whether a checkbox is checked or not, but it doesn't seem to be working as expected. My desired functionality is for the select element to be hidden upon page load and th ...

javascriptjqueryhtml

Adding CSS styles to an HTML generic control such as <UL> and <LI> in an ASP.NET application

I am struggling to apply CSS to an HTML generic control like <UL> and <LI> with the attribute runat="server" in ASP.NET. Specifically, I need to target the <li> element located within a master page from a content page. Once I locate thi ...

c#.netasp.nethtmlcss

The PHP content form is malfunctioning and not processing email submissions properly, resulting in the PHP code being

Following a tutorial, I attempted to create a basic contact form using PHP. As a beginner in PHP, I found the process fairly straightforward, but encountered some bugs in the code. Upon integrating the code on my website, clicking the submit button redirec ...

phpjqueryhtmlforms

Donut chart in SVG format failing to display properly in email messages

Here is an example of a donut chart that I am working with: <div class="donut-chart" style="position: relative;"> <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut"> ...

htmlsvggeometryhandlebars.jsdonut-chart

The <transition> element is not being recognized by VSCode

It seems like my VSCode is highlighting the transition element in red, indicating that it may not be recognizing this element. I'm a bit perplexed by what's happening here. Moreover, the code isn't functioning as expected because there is no ...

javascripthtmlvue.jstransition

Building a custom form layout using Bootstrap v4 with three input fields and a button all lined up on one

I am struggling to create a form with 3 input fields and a button on the same row using Bootstrap v4 for the design. Can anyone help me figure this out? Take a look at my current design: Click here My Code <div class="col-sm-7 mx-auto bg-faded"&g ...

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Adjusting the positioning of two elements inside a container

Contained within the #search-bar div is a clickable image and an h1 element (unfortunately, I am unsure where to place the relevant image.. my apologies). My goal was to separate them as shown. I'm curious if there might be a simpler and more concise ...

htmlcss

Attempting to transmit multiple variables

Can anyone provide assistance with passing multiple variables from one page to another? I am able to pass a single variable, but I need to send more than one by clicking a link. Below is a snippet of my code containing the rows I want to transmit to the ne ...

phphtmlpdo

Encountered an issue when attempting to create a form using Node.js, Express, and MySQL: "Cannot

While working on a form to collect user data, I encountered an issue after submitting the form where it displayed Cannot POST /users/create. I tried troubleshooting but couldn't find a solution. app.js file- const express = require('express&apos ...

htmlmysqlnode.jsexpress

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?

I'm facing an issue with server-side validation messages on my form, which includes fields for Name, Mobile, Email, and Message. While JQuery validation works fine, clearing the error message after user input is causing a problem. Using AJAX to submi ...

phpjqueryjsonajaxhtml

Is it possible to turn a forms dropdown into a clickable link?

I have designed a form and I am looking to set it up so that when users fill it out and submit it, they are directed to a specific page based on their selection in a dropdown menu. <div id="type"> First dropdown: <select id="typefield"> ...

html

Adjusting Border Lengths with Media Queries

I'm currently using the following code, but I'm facing an issue with media queries on iPAD where the right border is too close to the second Div. I'd like the border to align properly for all devices and browsers when using media queries. An ...

htmlcssmedia-queries

What is the best way to visually highlight the selected item in a list with a special effect?

I have a list that I'd like to enhance by adding an effect to the selected item after a click event. For instance, after clicking on the first item 'Complémentaire forfait', I want to visually highlight it to indicate that it has been selec ...

javascriptjqueryhtmlbootstrap-4

My website experiencing issues due to Firefox 23.0.1 altering the CSS and causing disruptions

After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...

htmlcssfirefoxbackground-color

What is the best way to send the value from a textbox to this script?

My challenge is with this particular textbox: <input type="text" autocomplete="off" required="required" id="bar" name="bar" class="form-control" placeholder="Barcode"> Also, there's a button in the mix: <button type="button" style="float:r ...

javascriptjqueryhtml

Where is the appropriate location to insert a <script> tag in NextJs?

I am facing a challenge in my NextJs application when trying to include the <script> code. I attempted to add it in a .js file but it did not work as expected. In traditional React applications, we typically use the index.html file to incorporate sc ...

javascripthtmlreactjsnext.js

Ways to move the cursor to the search field after the placeholder text

I'm working on a Vue project with a small app featuring an input type search. The issue I'm facing is that the cursor appears at the beginning of the input, whereas I want it to appear after the placeholder text. How can I make this adjustment? ...

htmlcssvue.js

The onClick event is not functioning properly with React's select and option elements

Looking for a way to get the option value from each region? const region = ['Africa','America','Asia','Europe','Oceania']; <div className="options"> <select> ...

javascripthtmlreactjsjsx

Styling elements with pseudo-classes when a horizontal scroll bar is activated

I have been experimenting with CSS pseudo-classes, specifically the before and after classes. While I have had no issues with the before class, I am running into a horizontal scroll problem when using the after class. I want to avoid using overflow: hidde ...

htmlcss