CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
AZ Games
AZ Games

Reputation: 23

2 Bootstrap navbars overlapping (want one fixed below the other)

I have this website that has 2 navbars, but the dark navbar keeps getting covered up by the light one, i want the light one on top and the dark one below it, what is wrong with my code?

link: https://paragon.fun/punishments/bans.php

Upvotes: 1

Views: 105

Answers (1)

Orlandster
Orlandster

Reputation: 4868

It happens because of the positioning you've specified. You are using fixed on the light navbar and relative on the dark one.

It depends on what you want to achieve. If the dark navbar should be positioned fixed below the light one you can simply add the following CSS:

.navbar-inverse {
  position: fixed;
  top: 50px;
  width: 100%;
}

But if the dark navbar should simply be below the light one, without any stickiness you would need to specify the top distance:

.navbar-inverse {
  top: 50px; // equal to the light navbars height
}

The reason why this happens is since you are using fixed positioning on your light navbar it will be taken out of the documentflow. Fixed elements will no longer affect the positioning of relative positioned elements like the dark navbar.

Upvotes: 1

Related Questions