How to add a fixed image above navbar / bootstrap

What you need to do is to add the image inside the navbar class. Check it out.

1
2
3
4
5
6
7
8
<nav class="navbar navbar-inverse navbar-fixed-top" id="mainnav">
 
<div class="container-fluid" style="background-color:#000;">
<a href="index.php"><img src="images/horse-logo2.jpg" class="img-responsive" alt="Logo" style="max-width:15%;"></a>
</div>
 
<div class="container">
<div class="navbar-header">

If the navbar is fixed-top, you won’t be able to set a margin for it. It won’t work.
What you can do is to add a margin-top to the next container that comes after the navbar.

Here is an example that will work. It’s not perfect. .container-up is the name of the container that comes after the navbar.

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media screen and (min-width: 100px) {
   .container-up {
        margin-top:25%;
    }
}
@media screen and (min-width: 480px) {
   .container-up {
        margin-top:25%;
    }
}
@media screen and (min-width: 800px) {
   .container-up {
        margin-top:20%;
    }
}
@media screen and (min-width: 1200px) {
   .container-up {
        margin-top:15%;
    }
}

ADD A COMMENT: