Как сделать свернутое навигационное меню открытым вниз - PullRequest
Новая
       1

Как сделать свернутое навигационное меню открытым вниз

0 голосов
/ 11 февраля 2019

Я пытаюсь добиться следующего, см. Изображение ниже.Я хочу, чтобы желтая полоса расширялась при открытии свернутого меню.На данный момент навигационные ссылки скрыты за логотипом, как показано на втором изображении ниже.

enter image description here enter image description here

Как сделатьЯ расширяю желтую полосу, когда свернутое меню нажимается / открывается?Заранее спасибо

Вот мой код: 

body {
  margin-top: 60px; 
}

.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.navbar .nav-item.active {
  border-left: #fff 3px solid;
}

.navbar-brand {                
  position: absolute;
  top: -60px;
  z-index: 900;
  width: 180px;
  height: 180px;
}

.navbar {
  height: 5rem !important;
}

.navbar-stripes {
  height: 1rem;
}

nav h1 {
  font-family: 'Staatliches', cursive;
  position: relative;
  left: 200px;
  top: 5px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <title>Brisol Futsal Club</title>
</head>

<body>
  <div class="bg-primary navbar-stripes"></div>
  <nav class="navbar navbar-expand-md navbar-light bg-warning">
    <div class="container">
      <a href="index.html" class="navbar-brand">
        <img src="https://i.imgur.com/1c8K4fu.png" alt="" class="img-fluid">
      </a>
      <div class="row">
        <h1 class="text-white d-none d-lg-block">Brisol Futsal Club</h1>
      </div>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a href="index.html" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="about.html" class="nav-link">About Us</a>
          </li>
          <li class="nav-item">
            <a href="players.html" class="nav-link">Players</a>
          </li>
          <li class="nav-item">
            <a href="sponsors.html" class="nav-link">Sponsors</a>
          </li>
          <li class="nav-item">
            <a href="contact.html" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="bg-success navbar-stripes"></div>

  
</body>

</html>

1 Ответ

0 голосов
/ 19 февраля 2019

удалите .navbar высоту из вашего css и добавьте margin-top для .navbar-nav класса, он будет работать 

 @media only screen and (max-width: 767px) {
      .navbar-nav{
        margin-top:80px;
       }
    }

попробуйте приведенный ниже фрагмент 

body {
  margin-top: 60px; 
}

.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.navbar .nav-item.active {
  border-left: #fff 3px solid;
}

.navbar-brand {                
  position: absolute;
  top: -60px;
  z-index: 900;
  width: 180px;
  height: 180px;
}
@media only screen and (max-width: 767px) {
  .navbar-nav{
  margin-top:80px;
}
}

/*.navbar {
  height: 5rem !important;
}*/

.navbar-stripes {
  height: 1rem;
}

nav h1 {
  font-family: 'Staatliches', cursive;
  position: relative;
  left: 200px;
  top: 5px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<body>
  <div class="bg-primary navbar-stripes"></div>
  <nav class="navbar navbar-expand-md navbar-light bg-warning" >
    <div class="container">
      <a href="index.html" class="navbar-brand">
        <img src="https://i.imgur.com/1c8K4fu.png" alt="" class="img-fluid">
      </a>
      <div class="row">
        <h1 class="text-white d-none d-lg-block">Brisol Futsal Club</h1>
      </div>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a href="index.html" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="about.html" class="nav-link">About Us</a>
          </li>
          <li class="nav-item">
            <a href="players.html" class="nav-link">Players</a>
          </li>
          <li class="nav-item">
            <a href="sponsors.html" class="nav-link">Sponsors</a>
          </li>
          <li class="nav-item">
            <a href="contact.html" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  
  </nav>
  
  <div class="bg-success navbar-stripes"></div>
  
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...