Пожалуйста, помогите изменить размер и переместить логотип на моем сайте

Мой сайт georgiantoast.com

Когда я запускаю его со своего рабочего стола, логотип имеет соответствующий размер и аккуратно помещается в верхнем левом углу. Однако, когда я загружаю index.html в свой хостинг, он раздувается на всю страницу. Это код:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" 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="#page-top">

            <img id="logo" src="img/portfolio/logo1.png" class="img-responsive" alt=""></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#portfolio">OUR WINES</a>
                </li>
                <li class="page-scroll">
                    <a href="#about">ABOUT US</a>
                </li>
                <li class="page-scroll">
                    <a href="#whereto">WHERE TO BUY</a>
                </li>
            </ul>
        </div>
         <!--/.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Код CSS:

@media(min-width:768px) {
.navbar-fixed-top {
    padding: 25px 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
    padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
    font-size: 1.5em;
}
#logo {
    height: 400%;
    margin-top: -35px;
}
.navbar {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}
.navbar a:focus {
    outline: 0;
}
.navbar .navbar-nav {
    letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
    outline: 0;
}
.navbar-default,
.navbar-inverse {
    border: 0;
}
}
Источник

3 ответа

Это должно быть звон колоколов.

#logo {
    height: 400%;
}

Это довольно очевидная проблема. Используйте Firefox или Chrome, вызовите режим разработчика и проверьте ваш img. Затем вы можете увидеть классы CSS, которые он использует. Я не смог найти ваш #logo, определенный в любом файле CSS, но вот что еще я нашел, используя эту стратегию.

.img-responsive{
    max-width:100%;
    height: auto;
}

+ Изменить max-width примерно до 20%.

Источник

Ваш сайт ( http://georgiantoast.com/), похоже, не имеет такой же CSS, как вы разместили в своем вопросе. Конкретно имея дело с #logo, Что касается logos Размер, вам нужно либо убрать его из медиа-запроса, чтобы при уменьшении области просмотра он не расширялся и не добавлял дополнительные правила (и я бы не использовал img-responsive в этих условиях)

Пример рабочего фрагмента.

body {
  padding-top: 100px;
}
.navbar.navbar-fixed-top {
  padding: 25px 0;
  -webkit-transition: padding .3s;
  -moz-transition: padding .3s;
  transition: padding .3s;
  text-transform: uppercase;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  background: white;
}
.navbar a:focus {
  outline: 0;
}
.navbar .navbar-nav {
  letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
  outline: 0;
}
.navbar #logo {
  height: 90px;
  margin-top: -35px;
  font-size: 2em;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}
@media(min-width:768px) {
  .navbar.navbar-shrink {
    padding: 10px 0;
  }
  .navbar.navbar-shrink .navbar-brand {
    font-size: 1.5em;
  }
  header .container {
    padding-top: 150px;
    padding-bottom: 150px;
  }
  header .intro-text .name {
    font-size: 2.75em;
  }
  header .intro-text .skills {
    font-size: 2.75em;
  }
}
@media(max-width:767px) {
  .navbar .navbar-collapse {
    margin-top: 30px;
    margin-bottom: -30px;
    border: none;
  }
}
header {
  text-align: center;
  color: #fff;
  width: 100%;
  background-size: cover;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b4/Niko_Pirosmani._Vintage._1906._Oil_on_oilcloth._125X301.5_cm.jpg");
  height: 500px;
}
.divider {
  width: 250px;
}
header .container {
  padding-top: 100px;
  padding-bottom: 100px;
}
header img {
  display: block;
  margin: 0 auto 20px;
}
header .intro-text .name {
  display: block;
  text-transform: uppercase;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2em;
  font-weight: 700;
}
header .intro-text .skills {
  font-size: 1.25em;
  font-weight: 300;
}
@media (max-width: 380px) {
  .navbar #logo {
    height: 60px;
    margin-top: -20px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" 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="#page-top">
        <img id="logo" src="http://georgiantoast.com/img/portfolio/logo1.png" alt="">
      </a>

    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>

        </li>
        <li class="page-scroll"> <a href="#portfolio">OUR WINES</a>

        </li>
        <li class="page-scroll"> <a href="#about">ABOUT US</a>

        </li>
        <li class="page-scroll"> <a href="#whereto">WHERE TO BUY</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<header>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="intro-text"> <span class="name">"The Cradle of Wine"</span>

          <hr class="divider"> <span class="skills"> Georgia is the birthplace of wine and home to over 500 indigenous grape verities. </span>

        </div>
      </div>
    </div>
  </div>
</header>

Ваш код с #logo вышел за пределы медиазапроса.

@media(min-width:768px) {
  .navbar-fixed-top {
    padding: 25px 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
  }
  .navbar-fixed-top .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
  }
  .navbar-fixed-top.navbar-shrink {
    padding: 10px 0;
  }
  .navbar-fixed-top.navbar-shrink .navbar-brand {
    font-size: 1.5em;
  }
  .navbar {
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
  }
  .navbar a:focus {
    outline: 0;
  }
  .navbar .navbar-nav {
    letter-spacing: 1px;
  }
  .navbar .navbar-nav li a:focus {
    outline: 0;
  }
  .navbar-default,
  .navbar-inverse {
    border: 0;
  }
}
#logo {
  height: 400%;
  margin-top: -35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" 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="#page-top">

        <img id="logo" src="http://georgiantoast.com/img/portfolio/logo1.png" class="img-responsive" alt="">
      </a>

    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>

        </li>
        <li class="page-scroll"> <a href="#portfolio">OUR WINES</a>

        </li>
        <li class="page-scroll"> <a href="#about">ABOUT US</a>

        </li>
        <li class="page-scroll"> <a href="#whereto">WHERE TO BUY</a>

        </li>
      </ul>
    </div>
    <!--/.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Источник

Я бы использовал этот подход для стилей (только изменено .navbar-fixed-top .navbar-brand, .navbar-fixed-top .navbar-nav разделы):

.navbar-fixed-top {
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    border: 1px solid red;
    width: 100%;
    padding: 0px;
    height: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.navbar-fixed-top .navbar-nav {
    margin-top: 10px;
    margin-bottom: 10px;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
    margin-top: 0px;
    margin-bottom: 0px;
}
.navbar-fixed-top.navbar-shrink .navbar-nav {
    margin-top: 5px;
    margin-bottom: 5px;
}
.navbar-fixed-top .navbar-brand #logo {
    height: 100%;
}

Т.е. отступы переместились во вложенный элемент navbar-brand и navbar-nav. Я использовал смещение 20/10px для нормального / усадочного состояния вместо вашего 25/20px - вы можете настроить его самостоятельно. Также Navbar-бренд установлен на 60 пикселей, логотип img # увеличен до 100% - может быть, он установлен на 60 пикселей в высоту. Я не совсем понимаю, почему это было сделано адаптивно. Не очень нужно в Navbar.

Источник
Другие вопросы по тегам