I need help getting my Bootstrap navbar to lay on top of the banner image

1

I’ve been trying to use position absolute to get the navbar links to lay on top of the banner image for hours to no avail. I have tried everything I can think. I’ve changed position to relative, absolute on various elements and still nothing. The only time the nav links do lay on top of the image they will always be toi the left even though I have the navbar-right class in my code. Can somebody PLEASE help me figure out how to get the navbar to lay on top of the image and have the links to the right?!?!? Here is a link to a Code Pen showing my problem. Thanks in advance! (https://codepen.io/Dylanidas/pen/GMZoGr)

2

Hey. Have you tried simply changing the class “navbar-static-top” to “navbar-fixed-top”?

By the way, you also have two unnecessary closed div tags (line 48\49) and you shouldn’t have head\html\body tags in your HTML panel. Load your scripts from the pen settings.

3

Yeah I’ve since deleted the closing divs that i didn’t need. I need the page to have a static navbar that scrolls. Is there a way to get it to be absolutely positioned using a static navbar?

4

I don’t know if I understood correctly but if you want it to be absolute positioned with the text on the right, just give the absolute position to the .nav-wrapper and then use right and left to make it fill the space horizontally, like:

.nav-wrapper {
  position:absolute;
  right:0;
  left:0;
}

Is this what you wanted?

5

YES! That did the trick! Thanks for the help!