CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
sikarak
sikarak

Reputation: 108

How to set fixed top navbar with custom bootstrap template?

I work for the website of a game I develop with my team, and I can't figure out out how to force my navbar to be fixed top.
Ideally, I would like to make the website in one page mode, but for the moment, this issue avoid to have an ergonomic navigation, because the navbar scroll with the content.
I want to make the content which is under the navbar to scroll Only

Bootstrap documentation says that you just need to put navbar-fixed-top to your syntax and to put the a div class="container" inside the <nav> tags, but it doesn't worked for me so far. I think my custom template can be the cause, but I need help please :)

You can find the URL here : http://raphaelvareilles.fr/labs/prism/

Upvotes: 0

Views: 1027

Answers (3)

Santhosh B
Santhosh B

Reputation: 162

Add the below CSS in your stylesheet

nav.navbar {
    position: fixed;
}
header {
    margin-top: 60px;
}

Upvotes: 0

tohood87
tohood87

Reputation: 728

I did the following:

.navbar.navbar-fixed-top {
    position: fixed;
}

Currently your prism.css ".navbar" is overriding the bootstrap position. The additional CSS above will avoid the issue.

Upvotes: 0

Roland Krinner
Roland Krinner

Reputation: 421

Just had a quick look at your page and in your prism.css line: 171 I can read:

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: none;
    font-size: 37px;
}

You have to remove position: relative; here, it overrides the position:fixed; style of Bootstrap.

Upvotes: 1

Related Questions