maxfloyd

December 9, 2018

Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)

Код: https://jsfiddle.net/aemjkhp9/

October 22, 2018

Всем привет. У меня возникла проблема, я не могу поместить прозрачное меню navbar на слайдер bootstrap 4.
Получается, что меню вверху, а под ним слайдер(

HTML:

Скрытый текст


<!doctype html>
<html lang="ru">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <title>Wixon</title>
  </head>
  <body>
    <header>
      <div class="container">
      <nav class="navbar navbar-expand-lg navbar-dark">
        <a href="#" class="navbar-brand"><img src="img/logo.png" alt="">Waxom</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
          aria-label="Toggler Navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a href="#" class="nav-link">Home</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">About Us</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Portfolio</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Features</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Blog</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Pricing</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Shortcodes</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Contact</a>
              </li>
            </ul>
            <ul class="navbar-nav offsetul2">
              <li class="nav-item">
                <a href="#" class="nav-link"><i class="fa fa-shopping-bag"></i></a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link"><i class="fa fa-search"></i></a>
              </li>
            </ul>
          </div>
      </nav>
      </div>
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="img/headerbg.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/headerbg.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/headerbg.png" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    </header>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

CSS:

Скрытый текст


@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Montserrat');

.navbar-brand {
  font-size: 30px;
  font-family: 'Raleway', sans-serif;
}

.nav-item {
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
}

.offsetul2 {
  margin-left: 40px;
}

Вопрос решил. Слайдер нельзя помещать в хедер. Добавить свойства
header {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}

Sign In

maxfloyd

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by maxfloyd

Как сделать высоту "a" по высоте родителя ul

Как поместить меню на слайдер bootstrap 4?

Forums

Important Information