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%; } } |