Need help making my nav bar fixed without losing the drop down options

Need help making my nav bar fixed without losing the drop down options
0.0 0

#1

Hello, I am looking for some helpwith making my dropdown nav bar fixed without losing the drop down options.
If you can help please inform me on what direction i need to go.
please and Thank You


#2

A bit hard to help without seeing what you’ve got, but here’s the best place to start: https://getbootstrap.com/components/#navbar


#3

body{
position: relative;
background-image: url(“http://pre10.deviantart.net/3046/th/pre/f/2010/320/d/1/website_background_by_modsoft-d3302jz.png”);
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: black;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;

width: 100%;

}

li {
float: left;
font-family: Impact, Charcoal, sans-serif;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

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

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

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

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

h1 {
font-family: Impact, Charcoal, sans-serif;
color: white;
font-size: 125px;
}


#4

King Koder

Some text some text some text some text..


#5

i went on there but it doesnt speak into having the drop down nav bar and it being fixed


#6

I just pulled up and forked a navbar demo on Codepen to test this (I added a bunch of <br>s to test the navbar being fixed.

Check this pen out, is this what you’re going for? I added the navbar-fixed-top class (as per the page @AbdiViklas linked) and it worked just fine for me.

Does that help at all?


#7

When you past code here, none of the html code is going to show up because it’s going to render the output instead. You could paste it as preformatted code by indenting four spaces at the start… but if you’re working in Codepen it’s much easier to just link the pen.


#8

thank you i was working on sublime but will transfer to code pen and post


#9

that is exactly what i am looking for thank you
but i dont just want to copy it… what significant code did you have to use in order for it to work and why is there no css involved?


#10

I actually didn’t write this code, I just modified it to show it’s possible.

The navbar comes from Bootstrap, which provides its own CSS to make it easier to make stuff like this. I would check out their section on navbars.

All I did was add the navbar-fixed-top class to the navbar to get it to work.

(Just want to ask to make sure: Do you know about Bootstrap? It’s taught here on freeCodeCamp, but since you’re talking about pure CSS I want to make sure you know about it. It makes things a lot easier.)

I’m glad I could help, let me know if there’s anything else!


#11

goes back to review the boot strap section
lol thank you


#12

Ha no problem. To be fair, I don’t exactly recall FCC covering navbar’s too extensively. Bootstrap has a lot of neat stuff to cover it all.


#13

yea im looking over it now but im trying to put the navbar under my heading

here is the codepen


#14

First off, in Codepen you can put your CSS in the CSS section instead of alongside your HTML to keep it more tidy.
Also, you can link to external CSS by going to Settings -> CSS -> Add External CSS (again, just to keep your HTML tidy and readable).

Other than that, I’m not finding much on putting a navbar under content (except for having at at the very bottom of the page).

I’ll keep searching and PM if I find anything so that this thread doesn’t keep getting bumped since the original problem is solved.