Solid navbar attached to top of screen

Code Feedback
1

So, I’ve been using this code for a quite a bit to use for a fixed navigation bar:

HTML

[code]




_slycolon




[/code]

CSS

.link {
    text-decoration: none;
    color: white;
}

.link:hover {
    text-decoration: none;
    color: gray;
}

#list {
    list-style: none;
}

.header {
    background: black;
    width: 100%;
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
}

.logo {
    float: left;
    font-family: "Helvetica";
    font-size: 15px;
    color: white;
    margin-left: 20px;
}

.logo:hover {
    color: gray;
    cursor: pointer;
}

.nav {
    float: right;
    margin-top: 25px;
    margin-right: 20px;
}

.nav-item {
    float: left;
    margin: 10px;
}

Now that I’ve added Bootstrap into it, the images and text seem to overlap into the header, but before I integrated Bootstrap, the navbar was a the top layer and all of the other content went under it. So my question is, how do I have the navbar layer on top of the content (This question pertains to the Portfolio in a sense that I’m trying to use this code to build the porfolio page). Thanks :relaxed:

2

You may find the Bootstrap nav bar easier to work with, since it’s designed to work with…well…Bootstrap, without any conflicts! :wink:

http://getbootstrap.com/components/#navbar

It’s a little more code, but you can get a nicely responsive menu hamburger out of it.

1 Like
3

@JacksonBates Fantastic! Thanks a ton!