Как я могу сделать мое меню гамбургера полностью видимым при расширении, а не pu sh мой слайдер изображений карусели вниз? - PullRequest
Новая
       0

Как я могу сделать мое меню гамбургера полностью видимым при расширении, а не pu sh мой слайдер изображений карусели вниз?

2 голосов
/ 31 марта 2020

У меня были некоторые проблемы с моей страницей, корректно реагирующей на изменение размера браузера. Я сделал карусель полноэкранного фонового изображения, но кажется, что это создает проблему при изменении размера моего браузера. Когда я раскрываю свое меню гамбургера, все его элементы могут быть не видны, в зависимости от высоты браузера, например, его можно увидеть полностью или , его можно вырезать, если высота браузера меньше . Вариант № 2 был бы нормальным, если бы панель навигации была <nav class="navbar static-top navbar-expand-xl">, но без класса fixed-top меню толкает мою карусель , и если я раскрою меню , оно становится даже хуже . Вот фрагмент: 

* {
  padding: 0;
  margin: 0;
}

@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');

body {
  overflow-x: hidden;
  font-family: 'Lato', sans-serif;
  color: #505962;
  margin: 0;
  padding: 0;
}

.carousel-item {
  height: 100vh;
  background-position: center;
  background-size: cover;
}

.navbar-brand img {
  height: 120px;
  margin-left: 30%;
}

.navbar {
  background-color: rgba(0, 0, 0, 0.5);
  height: 65px;
}

.navbar-nav.mr-auto li {
  padding: 0 5px;
}

.navbar-nav.mr-auto li a {
  color: white;
  font-family: "Raleway", sans-serif;
  font-size: 22px;
  font-style: bold;
  display: inline-block;
  border-bottom: 1px solid;
  border-color: transparent;
}

.navbar-nav.mr-auto li.active a {
  border-image: linear-gradient(90deg, #00ccff 33.33%, #001eff 33.33% 66.66%, #ff0000 66.66% 100%);
  border-image-slice: 1;
}

.nav.navbar-nav li a {
  color: white;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
  font-size: 22px;
  font-style: bold;
  display: inline-block;
}

.nav.navbar-nav {
  margin-right: 5%;
}

.navbar-nav.mr-auto li a:hover {
  border-image: linear-gradient(90deg, #00ccff 33.33%, #001eff 33.33% 66.66%, #ff0000 66.66% 100%);
  border-image-slice: 1;
}

.navbar-nav.mr-auto {
  margin-left: 5%;
}

.carousel-control-prev:hover {
  cursor: pointer;
}

.carousel-control-next:hover {
  cursor: pointer;
}

@media all and (max-width:1200px) {
  .navbar {
    width: fit-content;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

#loginbutton,
#signupbutton {
  margin: 10px;
  border-radius: 8px;
  background-color: transparent;
  width: 90px;
  height: 45px;
  border-color: transparent;
  font-family: "Raleway", sans-serif;
  color: white;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#loginbutton:hover,
#signupbutton:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.4s ease;
}

.modal-body {
  text-align: center !important;
}

.modal-backdrop {
  z-index: -1 !important;
}

.modal-content {
  color: white !important;
}

.form-control {
  background-color: rgb(24, 24, 24, 0.4) !important;

  border-color: transparent !important;
}

.form-group {
  display: block;
  text-align: center;
}

.form-group label {
  display: block;
}

.form-group i {
  text-align: center;
  display: block;
  position: relative;
}

input {
  color: white !important;
  width: 250px !important;
  margin-left: 28% !important;
  text-align: center !important;
}

::placeholder {
  color: white !important;
  opacity: 1 !important;
  text-align: center !important;
}

button.close {
  color: white !important;
  opacity: 1 !important;
  margin-right: 3% !important;
}

.modal-header h2 {
  margin-left: 41%;
}


#loginform {
  margin-left: -10%;
  height: 610px;
  width: 600px !important;
  border-radius: 20px !important;
  margin-top: 15%;
}

#loginmodalbutton {
  margin-top: 26.5%;
  margin-left: 1%;
  width: 80px;
  height: 35px;
  background-color: transparent;
  color: white;
  font-weight: bolder;
  font-size: 18px;
  display: inline-block !important;
  text-align: center !important;
  border-radius: 5px;
}

#loginmodalbutton:hover {
  background-color: rgb(88, 2, 8);
}

button:focus {
  outline: 0 !important;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  box-shadow: none !important;
}

#loginbody {
  transition: 2s all;
  -webkit-backdrop-filter: blur(5px) grayscale(100%);
  backdrop-filter: blur(5px) grayscale(100%);
}

#signupform {
  height: 30rem;
}

.eee {
  position: absolute;
  top: 20%;
  margin-left: 30%;
  color: #FFF;
}
<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="includes/script.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" , content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/css/flag-icon.min.css" rel="stylesheet">
  </head>

  <body>
    <nav class="navbar fixed-top navbar-expand-xl">
      <div class="navbar-header">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
          <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="collapse_target">
        <a class="navbar-brand" href="index.html"><img src="img/bmw_logo.png"></a>
        <ul class="nav navbar-nav mr-auto">
          <li class="nav-item active"><a class="nav-link" href="#"> Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Products</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Cars</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Motorbikes</a></li>
        </ul>
        <ul class="nav navbar-nav">
          <button type="button" data-toggle="modal" data-target="#loginModal" id="loginbutton"> LOGIN </button>
          <button type="button" data-toggle="modal" data-target="#signupModal" id="signupbutton"> SIGN UP</button>
        </ul>
        <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content card card-image" id="loginform" style="background-image: url('https://www.pixelstalk.net/wp-content/uploads/2016/07/Wallpapers-HD-1080P-3D-Download.jpg'); background-size: 230%;background-position: center;">
              <div class="modal-header">
                <h2 class="modal-title" id="exampleModalLabel" key="report_title">LOGIN</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body" id="loginbody">
                <form class="needs-validation" novalidate>
                  <div class="form-group" id="loginmail">
                    <i class="fas fa-envelope"></i>
                    <label for="exampleInputEmail1" key="label_email"> Enter your email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" data-translate="email_placeholder" placeholder="Enter email" key="email" required>
                    <div class="invalid-feedback" key="invalid_email">
                      Please enter a valid email address
                    </div>
                  </div>
                  <div class="form-group" id=loginpass>
                    <i class="fas fa-id-card"></i>
                    <label for="exampleInputPassword1" key="label_password">Enter your password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" data-translate="password_placeholer" placeholder="Password" key="password" required>
                    <div class="invalid-feedback" key="invalid_password">
                      Please enter a password
                    </div>
                  </div>
                  <button type="submit" class="btn btn" key="submit" id=loginmodalbutton>LOGIN</button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="modal fade" role="dialog" id="signupModal">
          <div class="modal-dialog">
            <div class="modal-content card card-image" id="signupform" style="background-image: url(img/bmw_signup.jpg); background-position: center; background-size: 100%;">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body" id="signupbody">
                <div class="form-group">
                  <input type="text" data-translate="email_placeholder" name="email" class="form-control" placeholder="Email" key="email">
                </div>
                <div class="form-group">
                  <input type="username" data-translate="username_placeholder" name="username" class="form-control" placeholder="Username" key="username">
                </div>
                <div class="form-group">
                  <input type="password" data-translate="password_placeholder" name="password" class="form-control" placeholder="Password" key="password">
                </div>
              </div>
              <button type="submit" class="btn btn" id="modalsignup" key="modalsignup"> Create
                Account</button>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">
      <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" role="listbox">
        <div class="carousel-item active" style="background-image:url(https://images3.alphacoders.com/823/thumb-1920-82317.jpg)"></div>
        <div class="carousel-item" style="background-image: url(https://www.itl.cat/pics/b/28/284520_full-hd-wallpapers.jpg);"></div>
        <div class="carousel-item" style="background-image: url(https://wallpaperaccess.com/full/2159447.jpg);"></div>
      </div>
      <div class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </div>
      <div class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </div>
    </div>
  </body>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

</html>

1 Ответ

0 голосов
/ 31 марта 2020

Один из вариантов - сделать размер шрифта (и отступы / поля, если вы предпочитаете) адаптивными. Вы также можете использовать max-height, чтобы, возможно, переместить меню справа от значка гамбургера (сдвинув его вверх, чтобы освободить место). Пример: 

.nav.navbar-nav li a {
  font-size: 5vh;
}

@media (max-height: 400px) {

  .navbar-collapse {
    margin-left: 80px;
    margin-top: -40px;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...