I'm developing a site in bootstrap and when I put the logo it only works in html and not in css, but what I find strange is that only the logo does not work, all styles are good!
HTML file
CSS file
@media (min-width: 1024px) {
.navbar-brand {
width: 150px;
height: 150px;
background-color: yellow; /* somente para debugar */
background-image: url(imgs/logo.png);
}
Check where the image is and where your CSS file is, depending on how your files are arranged, the CSS and HTML links will be used in different ways.
To access files that are in previous folders, you should use the notation ../
You have this structure:
seu-projeto/
index.html
imgs/
logo.png
css/
style.css
To access the HTML image you will find:
imgs/logo.png
As for CSS, the link will be this:
../imgs/logo.png
Assuming you want the image of your logo to be responsive, I advise you to add .img-responsive class to <img> tag. So the image will then scale well for the parent element by adjusting to the screen sizes.
More information in the official documentation link
A real example for greater understanding.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png"width=200px" class="img-responsive" alt="Logo">
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/">Home</a></li>
<li><a href="~/About/Index">About</a></li>
<li><a href="~/Contact/Index">Contacts</a></li>
</ul>
</div>
</nav>