Hey there everyone, I’m facing an issue with my responsive bootstrap menu. When I click the toggle button to open the dropdown menu, it doesn’t push the other content down like it should. Instead, it just overlaps the content. I’ve been trying to solve this for the past 3 hours but haven't had any luck.
The following is the HTML code snippet:
nav{
width:100%;
position: absolute;
top: 0;
right:0;
height:40px;
}
nav .navigatsioon .navbar{
border-radius:0px;
background-color:transparent;
}
nav .navigatsioon .container-fluid{
text-align:center;
}
nav .navigatsioon .navbar.navbar-default{
border-color:transparent;
}
nav .navigatsioon .navbar-default{
}
nav .navigatsioon .navbar-default .navbar-nav a{
color:white;
text-transform:uppercase;
font-weight:bold;
height:40px;
padding-top:10px;
border-bottom:3px solid transparent;
transition: all 0.5s ease;
font-size:15px;
}
nav .navigatsioon .navbar-default .navbar-nav a:hover{
color:white;
border-bottom:3px solid orange;
}
nav .navigatsioon .navbar-default .navbar-nav a.active{
color:white;
border-bottom:3px solid orange;
}
nav .navigatsioon .navbar-default .navbar-nav a:visited{
text-decoration:none;
color:white;
text-transform:uppercase;
font-weight:bold;
}
The above code snippet shows the structure of the navigation menu which might be causing the issue. Take a look and see if you can spot any errors or anomalies in the code that could be causing the problem.