Нужна помощь в добавлении цвета фона в выпадающее меню на тему Bootstrap - PullRequest
Новая
       1

Нужна помощь в добавлении цвета фона в выпадающее меню на тему Bootstrap

0 голосов
/ 05 февраля 2020

РЕДАКТИРОВАТЬ:

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

HTML: 

<body id="page-top">

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">My Site</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto my-2 my-lg-0">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#services">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

CSS: 

@media screen and (max-width:991.98px) {
  .navbar-nav{
    background-color: #f0ede8;
    height: 200px;
    width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
float:left;
  }

  .navbar-nav .nav-item{
    text-align: center  
  }
}

Еще раз спасибо за вашу помощь!

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

enter image description here enter image description here

Спасибо !

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<body id="page-top">

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">My Site</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto my-2 my-lg-0">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#services">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

если вы хотите, чтобы размер меню пополам и поместили его под заголовком,

я просто добавил небольшой код из @Shanice Morgan 

@media screen and (max-width:768px){
  .navbar-nav{
    background-color:gainsboro;
    border:blue 2px solid;
    float:left; /* left side */
  }
  .navbar-nav .nav-item{
    border:blue 2px solid;
    padding: 0px 10px;
  }
}
1 голос
/ 05 февраля 2020

Попробуйте это: 

@media screen and (max-width:768px){
  .navbar-nav{
    background-color:gainsboro;
    border:blue 2px solid;
  }
  .navbar-nav .nav-item{
    border:blue 2px solid;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...