The Bootstrap dropdown menu seems to have a mind of its own, stubbornly sticking to the top left corner of the screen with no intention

Currently, I am creating a music streaming service similar to Deezer. However, I am encountering an issue with my dropdown menu placement. Despite attempting various adjustments such as changing the margins and using absolute positioning with specific coordinates, the dropdown menu remains fixed at the top left corner of the page. Any assistance would be greatly appreciated!

Here is the HTML code for the dropdown menu:

<!DOCTYPE html>  
<html>  
<head>  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="69190619190c1b47031a295847585d475e">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7a607d607f">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&...

The CSS styling for the project includes the following rules:

/* frame2 */

.search{
    position: absolute;
    width: 1105px;
    height: 58px;
    left: 40px;
    top: 5px;
    
    border-style: none;
    font-family: "Gill Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    
   }
   ::placeholder {
    color: #BEBEBE;
    }
    .search_icon{
        position: absolute;
    width: 28px;
    height: 28px;
    margin-top: 10px;
    }
    .plus{
        position: absolute;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    margin-left: 1160px;
    font-size: 200 px;
    }
    .admin{
    position: absolute;
    width: 55px;
    height: 55px;
    margin-top: 0px;
    margin-left: 1200px;
    }

.dropdown-menu{
    position:absolute;
    left: 800;
}

View the current output here.

htmlcsstwitter-bootstrapbootstrap-4drop-down-menu

Answer №1

Avoid using position:absolute unless absolutely necessary. In this scenario, you are positioning all elements when you could achieve the desired effect by making use of flex or grid in the elements with the class slide. I've made some minor updates to your code, but I recommend expanding your HTML coding knowledge through online tutorials or courses. If you are already utilizing bootstrap on your webpage, make the most of it =) You can also find numerous bootstrap tutorials on YouTube.

In response to your query about moving the dropdown-menu element (which is nested within the dropdown section), adjusting its position independently will not produce the desired result. Instead, apply positional changes directly to the .dropdown parent element.

I have incorporated flex into your CSS code for better alignment. Here's how the updated CSS looks:


.search{
    //position: absolute;
    width: 1105px;
    height: 58px;
    left: 40px;
    top: 5px;
    
    border-style: none;
    font-family: "Gill Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
}
::placeholder {
    color: #BEBEBE;
}
.search_icon{
    //   position: absolute;
    width: 28px;
    height: 28px;
    margin-top: 10px;
}
.plus{
    //    position: absolute;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    margin-left: 1160px;
    font-size: 200 px;
}
.admin{
    //position: absolute;
    width: 55px;
    height: 55px;
}
.slide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
.dropdown {
    width: 100px;
}

While it may not be flawless, this solution should suffice. Alternatively, you might consider exploring other methods. For a quick reference guide on Bootstrap 4, check out this cheat sheet:

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

Click here for more navigation options

I'm looking to enhance my navigation bar by adding an additional section that expands underneath when a specific button is clicked. Think of it like the functionality on the Apple Store website where clicking on a product reveals another bar. https:/ ...

javascripthtmlcss

Changing padding of a button causes surrounding elements to move?

Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...

htmlcssbuttonmouseeventstylesheet

Disabling a button until a selection is made in a combobox using Angular

I am currently working on a template that includes a combobox, a button, and a table. What I am trying to achieve is to make the buttons unclickable unless a value is selected from the combobox. After selecting a value, the button will call a service metho ...

htmlangular

How can I position a logo slightly off center to the left, rather than all the way to the left?

I attempted to implement this code: <div id="logo" style="background-image: url('http://comprogroup2ict2b.rf.gd/logo.png'); width: 100px; height: 50px; background-size: contain; background-repeat:no-repeat; float: left"> ...

htmlcss

The tbody element fails to occupy the full width of the table, leaving the content exposed

HTML: <body class="header"> <div class="container-fluid"> <div class="container d-flex justify-content-center"> <p class="display-3">Secure Vault</p> < ...

htmlcssbootstrap-5

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

javascriptjqueryhtmlcssflexbox

spontaneous generation of web page elements

I want to implement a coverflow using the plugin found at this link: Here is an example of how it can be done: <div class="coverflow"> <div class="cover">A</div> <div class="cover">B</div> ... <div class=" ...

javascriptjqueryhtmlcss

Should CSS variables be defined within the render method of a React component?

Yesterday, I mistakenly created and deleted a post. Now, I am facing an issue with creating a component that requires specific styling. The problem arises when the componentDidMount() method causes flickering during the rendering process, as it takes some ...

javascripthtmlcssreactjscss-variables

Why am I encountering an "Uncaught TypeError: Cannot read property 'value' of null" Error while trying to authenticate via Email?

I'm having some trouble setting up Firebase authentication using email. Whenever I click on the login button, I encounter an error message: users.js:15 Uncaught TypeError: Cannot read property 'value' of null Additionally, upon hitting t ...

javascripthtmlfirebasefirebase-authentication

What is the best way to apply inline styling to a video/gif embed code that is outside of the document object model (DOM)?

My collection includes a variety of embed codes from different gif/video sites, such as: <iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowf ...

javascriptjqueryhtmlcss

When using Angular JS, you can easily display a message and refresh the page with just one click

Is there a way to automatically refresh the page after displaying a message or alert indicating "Successful" or the opposite? How can I make this work? I attempted to refresh the code but the message does not appear afterwards. HTML CODE: <div class= ...

htmlangularjs

"Return to previous view with the zoom back feature in CanvasJS

How can I implement a zoom back button in CanvasJS using jQuery or normal JavaScript? I've been attempting to place it near the ones in the top right corner, but something seems to be amiss. Alternatively, is it feasible to enable zooming in and out ...

javascriptjqueryhtmlcanvascanvasjs

whole <li> tag with both <a href> and <span> elements to create a clickable link

[RESOLVED] Solution found: I finally realized that the closing </a> tag comes before the <span> tags in the initial HTML code provided in the question, which was causing the issue! Thank you to everyone for your assistance!! This just goes to s ...

csshtml-listsblockhtml

Utilize Bootstrap to resize an image to fit within a div container

My goal is to have images in a carousel fill the entire width and height of the containing div. Currently, the images do not occupy 100% of the width of the div and the height varies. I am working with Bootstrap 4.3.1. Here is an excerpt of my code: < ...

htmlcssbootstrap-4

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

javascriptcssreactjstwitter-bootstrap

How can we prevent floating li elements from overlapping the parent div element?

What could be causing the yellow stripe (#header) to disappear when I apply "float left;" to "#header ul li"? Despite setting a fixed size for "#header ul li", I anticipated that the list items would line up next to each other horizontally, not exceeding t ...

csshtml

Struggling with displaying a CSS dropdown menu below its parent element?

I need help with my menu structure. <nav id="nav"> <ul> <li>Home</li> <li>Menu1 <ul> <li>Sub1</li> <li>Sub2</li> </ul> </li> <li>Menu2 <ul> & ...

htmlcssdrop-down-menumenu

Leveraging font awesome ttf in conjunction with scss

I am currently attempting to incorporate Font Awesome with SCSS. @font-face { font-family: 'awesome'; src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf'); } Although the path appears to be correct, I am ...

csssassfont-awesome

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

htmltypescriptimagevue.js

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

cssvue.jssass