Почему моя вертикальная навигация скрыта за остальными элементами? - PullRequest
Новая
       3

Почему моя вертикальная навигация скрыта за остальными элементами?

1 голос
/ 09 июля 2020

В этом коде моя вертикальная навигация скрыта за такими элементами, как заголовок h1 и изображение публикации. Когда я переключаю навигацию, она прячется за остальными элементами и не работает должным образом. Как это решить? Пожалуйста, запустите фрагменты кода 

/* <================= Nav Primary =================> */
#nav-primary {
    background-color: #007DBD;
    height: 45px;
}

#nav-primary a.navbar-brand {
    color: #ffffff;
}

#nav-primary a.nav-link {
    color: #ffffff;
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
    padding-top: 9px;
    margin-left: 25px;
}

#nav-primary #item-list a.nav-link:hover {
    border-bottom: 2px solid #ffffff;
    padding-bottom: 7px;
}

#nav-primary .btn-outline {
    color: #ffffff;
    border-color: #ffffff;
    font-weight: 500;
    padding: 3px 5px;
    background-color: #007DBD;

}

#nav-primary .btn-outline:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #007DBD;
    font-weight: 600;
}

#nav-primary button.navbar-toggler {
    color: #ffffff;
}

#nav-primary button.navbar-toggler:focus {
    outline: none;
}

#nav-primary .avatar img {
    border: 2px solid #ffffff;
    border-style: dotted;
}

#nav-primary .dropdown-menu {
    min-width: 100px;
    left: -30px;
}

#nav-primary .dropdown-menu a {
    text-decoration: none;
    color: #007DBD;
}

#nav-primary .dropdown-menu a:hover {
    color: #006699;
}

@media only screen and (max-width: 720px) {

    #nav-primary a.navbar-brand,
    #nav-primary button.navbar-toggler {
        padding-top: 0;
    }

    #navbar-1 {
        background-color: #007DBD;
        margin-top: 5px;
        border-radius: 3px;        
    }

    #nav-primary #item-list a.nav-link:hover {
        border-bottom: none;
        padding-bottom: 8px;
    }

    #nav-primary .dropdown-menu {
        position: absolute;
        margin-left: 50px;
    }
}

/* <================== Latest Posts =================> */

/*--- Post ---*/
.blog-post {
    margin-bottom: 30px;
}

.blog-post p {
    font-size: 14px;
}

.blog-post h2 {
    font-size: 28px;
}

.blog-post p.post-date {
    margin-top: 51px;
}

.author-row {
    margin: -44px 0 0 0;
}

p.post-author {
    margin-top: 35px;
}

.blog-post p.post-cat a::before {
    content: " | ";
    color: #555555;
}

.blog-post a.button {
    border-radius: 2px;
    border: 1px solid;
    padding: 5px;
}

.blog-post a.button:hover {
    text-decoration: none;
}

@media only screen and (max-width: 720px) {
    .blog-post {
        margin-bottom: 20px;
    }

    .blog-post p {
        font-size: 12px;
    }

    .blog-post h2 {
        font-size: 24px;
    }

    .blog-post .post-comments a {
        padding-left: 30px !important;
    }

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="css/style.css">

  <title>Swan - Bootstrap Blog Template</title>
</head>

<body>

  <!-- <========================== Header =========================> -->
  <header>
    <div class="container-fluid px-0">

      <!-- Navigation Bar -->
      <nav class="navbar navbar-expand-md" id="nav-primary">
        <a href="#" class="navbar-brand">SWAN</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar-1" aria-expanded="false">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbar-1">
          <ul class="navbar-nav" id="item-list">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">PHP</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">OOP</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">JavaScript</a>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item avatar dropdown">
              <a class="nav-link dropdown toggle" href="#" data-toggle="dropdown">
                <button class="btn btn-outline d-none">Sign Up</button>
                <img src="/images/profile-1.jpg" alt="Profile Avatar" class="rounded-circle" height="32px" width="32px">
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                </li>
                <li>
                  <a href="#"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <!-- <=========================== Main ==========================> -->
  <main>
    <div class="container mt-5">
      <div class="row">

        <!-- <====== Blog Entries ======> -->
        <div class="col-md-8">

          <!-- Latest Posts -->
          <hr class="mb-0">
          <h1 class="text-center">Latest Posts</h1>
          <hr class="mt-0">

          <!-- Blog Post -->
          <div class="blog-post">
            <img src="https://dummyimage.com/600x400/000/fff" alt="" class="img-fluid mt-3">
            <div class="row author-row">
              <div class="col-8 mt-3">
                <img src="images/profile-1.jpg" alt="" class="img-fluid rounded-circle pull-left pl-2">
                <p class="pull-left ml-4 post-author">By: <a href="#">Author</a></p>
              </div>
              <div class="col-4 pr-1">
                <p class="pull-right post-date">June 7th, 2020</p>
              </div>
            </div>
            <h2 class="pt-2">
              <a href="#">How to Learn CSS with SASS and JavaScript</a>
            </h2>
            <p class="post-cat mt-4">
              <a href="#">PHP</a>
              <a href="#">Web Development</a>
            </p>
            <p class="mt-3">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam animi atque voluptatem, soluta, illum at
              fugiat ea voluptatibus commodi possimus eligendi doloremque quam consequuntur aut qui facere cupiditate!
              Deserunt, officia. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.
            </p>
            <div class="row mt-4">
              <div class="col-6">
                <a class="button" href="#">Read More <i class="fa fa-fw fa-long-arrow-right" aria-hidden="true"></i></a>
              </div>
              <div class="col-6">
                <div class="pull-right">
                  <span>
                    <a href="#" class="pull-left">
                      <i class="fa fa-fw fa-heart-o fa-lg" aria-hidden="true"></i>
                      <i class="fa fa-fw fa-heart fa-lg d-none" aria-hidden="true"></i>
                    </a>
                    <p class="pull-left pl-2 pt-1">245</p>
                  </span>
                  <span class="post-comments">
                    <a href="#" class="pull-left pl-5">
                      <i class="fa fa-fw fa-comment-o fa-lg" aria-hidden="true"></i>
                    </a>
                    <p class="pull-left pl-2 pt-1 pr-1">25</p>
                  </span>
                </div>
              </div>
            </div>
          </div><!-- /Blog Post -->
        </div><!-- /Blog Entries -->

        <!-- <====== Sidebar ======> -->
        <div class="col-md-4">
          
        </div>
      </div>
    </div>
  </main>

  <!-- <======================== Footer ======================> -->
  <footer>

  </footer>
</body>

<!-- JS Framworks and Libraries -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Custom JavaScript -->
<script src="js/script.js"></script>

</html>

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

Ответы [ 2 ]

1 голос
/ 09 июля 2020

Если вы измените z-index в раскрывающемся меню, ваше меню появится перед элементами с меньшим z-индексом. 

#navbar-1 {
  z-index: 100;
  background-color: #007DBD;
  margin-top: 5px;
  border-radius: 3px;
}
0 голосов
/ 09 июля 2020

Добавить z-index к элементу. img и h1 не имеют свойств position и z-index, поэтому меньший z-index подойдет вам. 

.navbar-collapse{
    z-index:10;
 }


/* <================= Nav Primary =================> */
#nav-primary {
    background-color: #007DBD;
    height: 45px;
}

#nav-primary a.navbar-brand {
    color: #ffffff;
}

#nav-primary a.nav-link {
    color: #ffffff;
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
    padding-top: 9px;
    margin-left: 25px;
}

#nav-primary #item-list a.nav-link:hover {
    border-bottom: 2px solid #ffffff;
    padding-bottom: 7px;
}

#nav-primary .btn-outline {
    color: #ffffff;
    border-color: #ffffff;
    font-weight: 500;
    padding: 3px 5px;
    background-color: #007DBD;

}

#nav-primary .btn-outline:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #007DBD;
    font-weight: 600;
}

#nav-primary button.navbar-toggler {
    color: #ffffff;
}

#nav-primary button.navbar-toggler:focus {
    outline: none;
}

#nav-primary .avatar img {
    border: 2px solid #ffffff;
    border-style: dotted;
}

#nav-primary .dropdown-menu {
    min-width: 100px;
    left: -30px;
}

#nav-primary .dropdown-menu a {
    text-decoration: none;
    color: #007DBD;
}

#nav-primary .dropdown-menu a:hover {
    color: #006699;
}

@media only screen and (max-width: 720px) {

    #nav-primary a.navbar-brand,
    #nav-primary button.navbar-toggler {
        padding-top: 0;
    }

    #navbar-1 {
        background-color: #007DBD;
        margin-top: 5px;
        border-radius: 3px;        
    }

    #nav-primary #item-list a.nav-link:hover {
        border-bottom: none;
        padding-bottom: 8px;
    }

    #nav-primary .dropdown-menu {
        position: absolute;
        margin-left: 50px;
    }
}

/* <================== Latest Posts =================> */

/*--- Post ---*/
.blog-post {
    margin-bottom: 30px;
}

.blog-post p {
    font-size: 14px;
}

.blog-post h2 {
    font-size: 28px;
}

.blog-post p.post-date {
    margin-top: 51px;
}

.author-row {
    margin: -44px 0 0 0;
}

p.post-author {
    margin-top: 35px;
}

.blog-post p.post-cat a::before {
    content: " | ";
    color: #555555;
}

.blog-post a.button {
    border-radius: 2px;
    border: 1px solid;
    padding: 5px;
}

.blog-post a.button:hover {
    text-decoration: none;
}

@media only screen and (max-width: 720px) {
    .blog-post {
        margin-bottom: 20px;
    }
    .navbar-collapse{
    z-index:10;
    }
    .blog-post p {
        font-size: 12px;
    }

    .blog-post h2 {
        font-size: 24px;
    }

    .blog-post .post-comments a {
        padding-left: 30px !important;
    }

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="css/style.css">

  <title>Swan - Bootstrap Blog Template</title>
</head>

<body>

  <!-- <========================== Header =========================> -->
  <header>
    <div class="container-fluid px-0">

      <!-- Navigation Bar -->
      <nav class="navbar navbar-expand-md" id="nav-primary">
        <a href="#" class="navbar-brand">SWAN</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar-1" aria-expanded="false">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbar-1">
          <ul class="navbar-nav" id="item-list">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">PHP</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">OOP</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">JavaScript</a>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item avatar dropdown">
              <a class="nav-link dropdown toggle" href="#" data-toggle="dropdown">
                <button class="btn btn-outline d-none">Sign Up</button>
                <img src="/images/profile-1.jpg" alt="Profile Avatar" class="rounded-circle" height="32px" width="32px">
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                </li>
                <li>
                  <a href="#"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <!-- <=========================== Main ==========================> -->
  <main>
    <div class="container mt-5">
      <div class="row">

        <!-- <====== Blog Entries ======> -->
        <div class="col-md-8">

          <!-- Latest Posts -->
          <hr class="mb-0">
          <h1 class="text-center">Latest Posts</h1>
          <hr class="mt-0">

          <!-- Blog Post -->
          <div class="blog-post">
            <img src="https://dummyimage.com/600x400/000/fff" alt="" class="img-fluid mt-3">
            <div class="row author-row">
              <div class="col-8 mt-3">
                <img src="images/profile-1.jpg" alt="" class="img-fluid rounded-circle pull-left pl-2">
                <p class="pull-left ml-4 post-author">By: <a href="#">Author</a></p>
              </div>
              <div class="col-4 pr-1">
                <p class="pull-right post-date">June 7th, 2020</p>
              </div>
            </div>
            <h2 class="pt-2">
              <a href="#">How to Learn CSS with SASS and JavaScript</a>
            </h2>
            <p class="post-cat mt-4">
              <a href="#">PHP</a>
              <a href="#">Web Development</a>
            </p>
            <p class="mt-3">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam animi atque voluptatem, soluta, illum at
              fugiat ea voluptatibus commodi possimus eligendi doloremque quam consequuntur aut qui facere cupiditate!
              Deserunt, officia. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.
            </p>
            <div class="row mt-4">
              <div class="col-6">
                <a class="button" href="#">Read More <i class="fa fa-fw fa-long-arrow-right" aria-hidden="true"></i></a>
              </div>
              <div class="col-6">
                <div class="pull-right">
                  <span>
                    <a href="#" class="pull-left">
                      <i class="fa fa-fw fa-heart-o fa-lg" aria-hidden="true"></i>
                      <i class="fa fa-fw fa-heart fa-lg d-none" aria-hidden="true"></i>
                    </a>
                    <p class="pull-left pl-2 pt-1">245</p>
                  </span>
                  <span class="post-comments">
                    <a href="#" class="pull-left pl-5">
                      <i class="fa fa-fw fa-comment-o fa-lg" aria-hidden="true"></i>
                    </a>
                    <p class="pull-left pl-2 pt-1 pr-1">25</p>
                  </span>
                </div>
              </div>
            </div>
          </div><!-- /Blog Post -->
        </div><!-- /Blog Entries -->

        <!-- <====== Sidebar ======> -->
        <div class="col-md-4">
          
        </div>
      </div>
    </div>
  </main>

  <!-- <======================== Footer ======================> -->
  <footer>

  </footer>
</body>

<!-- JS Framworks and Libraries -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Custom JavaScript -->
<script src="js/script.js"></script>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...