How to make a HTML NavBar

Question

I was wondering how to make a HTML navbar using CSS. I've already got most of the code done but I'm caught up on one part. I need the header to turn solid once it's past a div on the page. Is there some sort of CSS class to do this, or will I have to set up a JavaScript script to change the CSS as time goes on. You can see my code on this site: here. I'm sorry, I'm a noob to CSS, but I'm trying my best to learn.

EDITED PAST HERE:

In the "cover.css" script on the site I use the class "masthead" to define the portion of the site that I use as the NavBar.

.masthead {
background-color: #000;
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0;
border-style: solid;
border-color: rgba(0,0,0,0.5);
border-radius: 5px;

}

After the user scrolls past a particular div on the page, I want to change the background-color: to solid black (#000). Hopefully this clarifies the question a bit.

I'm not sure what you mean by a "css header". How would this be different than something like a `
` or an `
`? — Mike, Apr 09 '14 at 18:18
Your question is much too broad for the SO community to give you a meaningful answer. Can you provide sample code illustrating what you have already tried and what about it isn't working? — dgvid, Apr 09 '14 at 18:19
Well if you go on my site, it's the bit that has Perfection Hosting Home Billing Multicraft Contact Us — duper51, Apr 09 '14 at 18:19
I see it, but I'm not clear on what you're trying to do with it. — Mike, Apr 09 '14 at 18:20
check Jonas answer below and you need to add css example .masthead.fixed{background:#000;} — Pravin W, Apr 09 '14 at 18:28

Jonas Grumann · Accepted Answer · 2014-04-09T18:34:13.130

You'll need javascript, I suggest you use jQuery as it simplifies things quite a bit: http://jquery.com/

And then write a script, something like:

$(window).on('scroll', function(e) {
    var scrollTop = $('body').scrollTop();
    if (scrollTop > 300) { //300 is pixels you scrolled, it's just an example
        $('.header').addClass("fixed");
    } else {
        $('.header').removeClass("fixed");
    }
})

And in your css you will need to set up the .fixed class:

.header {
    position: static;
}
.header.fixed {
    position: fixed;
    top:0
}

EDIT:

Here's a fiddle to demonstrate how to use it: http://jsfiddle.net/nY2ek/

score 1 · Answer 2 · answered Apr 09 '14 at 18:19

1

I was wondering how to make a CSS header.

You can't. Headers are semantic, and CSS is only presentational. You must use HTML instead.

answered Apr 09 '14 at 18:19

Oriol

274,082
63
437
513

1

Thank you captain obvious. I wrote the site myself, using bootstap as a base. Did you really feel it necessary to put this as a "answer"? – duper51 Apr 09 '14 at 18:25
@duper51 Your question is contradictory, thus not well defined. Then, I can't answer properly, I can only note the its problem. – Oriol Apr 09 '14 at 19:26

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

If you are looking for the code visit How to fix a header on scroll - it explains it all in detail.

Please comment back if you need any help.

edited May 23 '17 at 11:57

Community

1
1

answered Apr 09 '14 at 18:27

Mudassir

1,136
1
11
29

How to make a HTML NavBar

` or an `

`?

3 Answers3