https://getbootstrap.com/docs/3.3/
Try Bootstrap 3 and check if that still happens to you.
Solution 1 :
Solution 2 :
Found the solution!
I completely removed the .navbar class and all corresponding CSS classes from the bootstrap.css file and replaced it with the W3Schools navbar CSS.
As this is a testing site I can do this, but I would not recommend it as a definitive solution. It may cause problems later (I haven’t experienced any so far).
Problem :
I copied the “mega menu” navbar from W3Schools to a blank page and attached custom CSS, but as soon as I attach the bootstrap CSS file, the header layout is changed completely and the dropdown content doesn’t show up anymore. I added two images below the snippet to show what exactly happens. I tried finding the CSS conflict with element inspector without success. I also tried different versions of bootstrap.css but all versions are causing the same navbar to become misplaced.
/* HEADER CSS */
/* Custom */
.navbar {
height:100px!important;
border-bottom:5px solid rgba(55,175,75,1.00)!important;
background-color:rgba(255,255,255,1.00)!important;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"!important;
}
.brand {
margin-top:9px!important;
width:175px!important;
}
.brand-link {
background-color:rgba(255,255,255,0.00)!important;
}
.brand-link:hover {
background-color:rgba(255,255,255,0.00)!important;
}
.navlink {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
font-size:1.10em!important;
font-weight:300!important;
}
.navlink:hover {
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,0.35)!important;
}
.droplink {
}
.droplink:hover {
}
.dropbtn {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
cursor:pointer!important;
font-size:1.10em!important;
font-weight:300!important;
}
.dropdown-content {
margin-top:-2px!important;
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header-title {
margin-top:0!important;
margin-bottom:8px!important;
color:rgba(255,255,255,1.00)!important;
font-size:1.35em!important;
}
.dropdown-content .droprow {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .dropcol {
background-color:rgba(55,175,75,1.00)!important;
}
/* Default */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
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;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Naamloos document</title><h3></h3>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="navbar">
<a href="/index.htm" class="brand-link">
<img src="/img/brand.png" class="responsive brand" alt="navbar brand icon">
</a>
<a href="#home" class="navlink">Home</a>
<a href="#news" class="navlink">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="header">
<h2 class="header-title">Mega Menu</h2>
</div>
<div class="row droprow">
<div class="column dropcol">
<h3 class="header-title">Category 1</h3>
<a href="#" class="droplink">Link 1</a>
<a href="#" class="droplink">Link 2</a>
<a href="#" class="droplink">Link 3</a>
</div>
<div class="column dropcol">
<h3 class="header-title">Category 2</h3>
<a href="#" class="droplink">Link 1</a>
<a href="#" class="droplink">Link 2</a>
<a href="#" class="droplink">Link 3</a>
</div>
<div class="column dropcol">
<h3 class="header-title">Category 3</h3>
<a href="#" class="droplink">Link 1</a>
<a href="#" class="droplink">Link 2</a>
<a href="#" class="droplink">Link 3</a>
</div>
<div class="column dropcol">
<h3 class="header-title">Category 4</h3>
<a href="#" class="droplink">Link 1</a>
<a href="#" class="droplink">Link 2</a>
<a href="#" class="droplink">Link 3</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Without any bootstrap CSS file attached (blue area is image), while mouse over dropdown button!
With bootstrap CSS file attached (blue area is image), also while mouse over dropdown button!
Comments
Comment posted by emgx
Bootstrap 3 causes the same problem but with a different layout.