Logo not responsive

Question

Logo not responsive

Navigation

#1 by (0 votes)
#2 by (-1 votes)

-5

.header_aera {
  background: #fff;
  border-radius: 0;
  border: 0;
  margin: 0;
  width: 100%;
  z-index: 9999;
  top: 0;
  box-shadow: 0px 0px 20px 0px rgba(21, 47, 95, 0.2);
}
.header_aera .navbar-header .navbar-brand {
  padding-top: 20px;

}
.header_aera .navbar-header .navbar-brand img {
  max-width: 100%;
  width: auto;
}
.header_aera .navbar-collapse .navbar-nav.navbar-right li a {
  font: 700 14px/100px "Roboto", sans-serif;
  color: #222222;
  text-transform: uppercase;
  padding: 0;
  padding-left: 30px;
}
.header_aera .navbar-collapse .navbar-nav.navbar-right li a:hover, .header_aera .navbar-collapse .navbar-nav.navbar-right li a:focus {
  color: #FF4C00;
}
.header_aera .navbar-collapse .navbar-nav.navbar-right li .nav_searchFrom {
  width: 100px;
  background: #FF4C00;
  color: #fff;
  padding: 0;
  text-align: center;
  margin-left: 15px;
}

<nav class="navbar navbar-default header_aera" id="main_navbar">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="col-md-2 p0">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
                </div>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="col-md-10 p0">
                <div class="collapse navbar-collapse" id="min_navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html">Início</a></li>
                        <li><a href="servicos.html">Serviços</a></li>
                        <li><a href="quemsomos.html">Quem Somos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div>
        </div><!-- /.container -->
    </nav>

bold text }

html css

asked by anonymous 28.02.2018 / 00:55

2 answers

Selection structure, use of for My project is not under git, it is in the local branch [closed]

score 0 · Answer 1

0

Good afternoon Matheus, I did what you said and changed a few things.

The error follows,

28.02.2018 / 20:27

score -1 · Answer 2

Use responsive images, since you use bootstrap this and even easier, put a class img-fluid in your logo, like this code:

<img src="..." class="img-fluid" alt="Responsive image">

Your code looks like this:

<nav class="navbar navbar-default header_aera" id="main_navbar">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="col-md-2 p0">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="img-fluid"></a>
                </div>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="col-md-10 p0">
                <div class="collapse navbar-collapse" id="min_navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html">Início</a></li>
                        <li><a href="servicos.html">Serviços</a></li>
                        <li><a href="quemsomos.html">Quem Somos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div>
        </div><!-- /.container -->
    </nav>