Bootstrap add fixed image above navbar, in header?

Bootstrap add fixed image above navbar, in header?

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: