How can I prevent Bootstrap from conflicting with my custom styles?

My HTML menu was functioning perfectly with specific CSS styles, until I decided to add a Bootstrap reference in the header:

New Link Added

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

After adding this Bootstrap reference, the dropdown menu under "File" stopped working completely... Interestingly, Bootstrap was included for a different purpose (DataTables), but that's beside the point.

Where did I go wrong?

Your assistance would be greatly appreciated.

Thank you.

Original Code, excluding Bootstrap:

/*CSS code here*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- HTML code here -->

Code with Bootstrap included:

/*CSS code here including Bootstrap styles*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<!-- HTML code here -->

jqueryhtmlcsstwitter-bootstrap

Answer №1

The default dropdown class used in your code is part of the bootstrap library. It functions properly without the need to include bootstrap. However, if you do add the bootstrap library, there may be conflicts with the naming of the dropdown class. Consider renaming the dropdown class to something different.

https://getbootstrap.com/docs/3.4/javascript/#dropdowns

Answer №2

Your code is encountering an issue due to the use of "position: absolute;" in ".dropwdown-content". This positions the item absolutely to its first explicitly positioned parent. When Bootstrap changes the position of the parent ".dropdown" to "relative", it affects the positioning of the first positioned parent to ".dropdown"

To resolve this problem: adjust the position of ".dropdown-content" to "fixed"; this will ensure that ".dropdown-content" is positioned relative to the browser window.

Here's a functional example:

body {
  font-family: Arial, Helvetica, sans-serif;
}

.bg-img {
  /* The image used */
  background-image: url("Dedale.jpg");
  /* min-height: 380px; */
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Needed to position the navbar */
  /* position: relative; */
}

.navbar {
  overflow: hidden;
  background-color: #e9e9e9;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  /* color: white; */
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #2196F3;
}

.navbar a.active {
  /* background-color: #2196F3; */
  color: white;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* Section SearchContainer */

.search-container {
  float: right;
}

.search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.search-container button:hover {
  background: #ccc;
}


/* Input Zone */

.navbar input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><br/>
<div class="navbar bg-img">
  <div class="dropdown">
    <button class="dropbtn">File
                <i class="fa fa-caret-down"></i>
            </button>
    <div class="dropdown-content">
      <a href="#">Open</a>
      <a href="#">Close</a>
      <a href="#">Quit</a>
    </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

Alert appearing before the user navigates back using the browser button

Is there a way to display a message to the user before they navigate away from the app by clicking the back button in their browser? In my app, I've disabled the ability for users to go back using the browser's buttons and instead provided intern ...

htmlangularnavigation

The exciting combination of data-transition and data-ajax in Jqmobile opens up a world

Within my Jqmobile code, I am attempting to transition between pages using the data-transition="slide" attribute for anchor links. The issue arises when the linked pages contain custom jQuery scripts that I have personally coded. When I click on an anchor ...

jqueryjquery-mobiletransition

Issue with Vue v-for not updating data model variable

I am attempting to render a page with dynamic properties using the following code: <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <div v-for="current in 2&quo ...

javascripthtmlvue.js

`I am experiencing issues with the HTTP Post functionality`

Whenever I click on the button displayed in the index.html code, an error occurs when the "$http.post" call is made. The web page then displays an alert saying 'Error!', preventing me from saving the new JSON file due to this issue. I need help ...

javascriptjqueryangularjs

Incorrect behavior of responsive background images

For the first time, I am working on a school project that requires me to create a responsive website. I am following the "mobile first" approach. On stackoverflow, I came across a helpful way of making background images responsive: background-image: url(. ...

javascripthtmlcssbackground-imageresponsive

Test your knowledge of Javascript with this innerHtml quiz and see

How can I display the output of a score from a three button radio button quiz without using an alert popup? I want the output to be displayed within a modal for a cleaner look. I tried using InnerHTML but now there is no output when the button is clicked. ...

javascriptjqueryhtml

The MySQL query is returning a blank result with only the column headings displaying

I have been working on improving my skills in PHP and AJAX by developing an application that enables users to search a database for real-time product stock information. Currently, I am facing an issue where the headings are displayed when a user types a le ...

phphtmlcssmysqlajax

Is your Ajax response suddenly failing to work after the initial attempt?

Describing my predicament: The code snippet below is what I have been using to insert a custom-designed div into my webpage. Initially, the div is successfully added; however, it stops working after the first instance. $('#addanother').click(fu ...

javascriptjqueryajax

Styling a div element in CSS with absolute positioning and the ability to

I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...

htmlcssscrollpositionabsolute

Utilizing modular structure for efficient jQuery AJAX request

Seeking guidance on optimizing multiple GET ajax calls, where each function contains repeated $.ajax({}) code lines. Is it feasible to create a single $.ajax({}) function and utilize it in all functions instead of duplicating the code? Perhaps something ...

javascriptjqueryajax

Looking to include an if/then statement for an item that has been generated within a div?

While I may not be a seasoned programmer, I am facing an issue that requires some problem-solving. Allow me to explain the situation to the best of my ability. Within a "div" element, I have implemented a v-for loop that sets a value in a variable for dis ...

htmlvue.js

Tips on modifying classes within specific sections of HTML tables

I attempted to create calendar-like tables, In my script, I am trying to handle events being registered. My goal is to change the classes of cells from 2 to 5 when they are clicked on, and change the cell colors from first to hovered to aqua. For this p ...

javascriptjqueryhtmlcss

Different sources for multiple iframes

Greetings everyone, I am facing an issue with multiple iframes on my page, each with a different src attribute. Despite specifying unique sources for each iframe, upon loading the page, they all seem to be loaded with the same src. <html><body&g ...

jqueryhtmliframe

The functionality of jquery .serialize is not effective when used on forms that are generated dynamically

Currently, I am utilizing Java/Spring within a .jsp file. The issue arises when attempting to dynamically load a form (including form tags) from myForm.jsp into a div in myPage.jsp and making an ajax post call with the data. Upon using jQuery .serialize a ...

jqueryhtmljsp

Invoke a C# function (returning a string) within ASP.NET to set the source attribute for an HTML element

I have developed some C# Methods that return a string output, such as "C:/tracks/audio1.mp3", and I want to use this as a reference for my ASP.NET project. Now, I am trying to incorporate my method "GetTrackPath()" into the HTML audio tag so that the meth ...

javascriptc#htmlasp.netrazor

Is it possible to utilize $(document).ready() within an ASP.NET page?

I am encountering an issue while attempting to use $(document).ready() as shown in the image above. What steps should I take to troubleshoot and resolve this problem? Update 23/05/2011 10:54 A new insight has come to light. The page I am working on inher ...

javascriptasp.netjquerydocument-ready

What is causing the issue with CSS properties and media queries not being effective on specific elements?

I have been experimenting with React and SCSS to create a portfolio page. Although I am familiar with these tools, I recently encountered issues where certain style changes were not reflecting in the browser. One specific problem involved styling the head ...

cssreactjssassbrowserdeveloper-tools

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side

How can I align two inner boxes vertically in the most efficient manner?

.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...

javascriptcssalignmentvertical-alignment

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

htmlcss