Как исправить исчезновение навигационной панели при сужении браузера Chrome? - PullRequest
Новая
       2

Как исправить исчезновение навигационной панели при сужении браузера Chrome?

0 голосов
/ 17 октября 2019

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

Также я знаю, что исчезновение происходит из-за класса navbar-expand-lg. Как я должен подходить к исправлению этого? Это возможно с помощью начальной загрузки? Или это можно исправить с помощью HTML и CSS, поскольку я не хочу, чтобы это делалось с помощью JavaScript.

HTML 

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
   <div class="container"> 
       <a class="navbar-brand" href="#">MADHUMITHA PRABAKARAN</a>
   </div>

   <!-- 

       <button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
           <span class="navbar-toggler-icon"></span>
       </button>

   -->

   <div class="container"> 
       <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav ml-auto">
               <li class="nav-item">
                   <a class="nav-link" href="index.html">About</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="portfolio.html">Portfolio</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="contact.html">Contact</a>
               </li>
           </ul>  
       </div>
   </div>
</nav>

CSS 

.navbar{
    background: #ffffff;
    border-style: solid;
    border-color: #cccccc;

    border-width: 2px;
    border-left-style: hidden;
    border-right-style: hidden;
    border-top-style: hidden;

    top:0;

}
 .navbar-brand {
    background-color: #4aaaa5;
    color: white;
    font-size: 200%;
    font-family: 'Times New Roman', Times, serif;
    text-align: justify;
    margin-top:-10px;
    margin-bottom: -10px;
}

1 Ответ

0 голосов
/ 17 октября 2019

Полагаю, вы хотите использовать <a>your title</a> в качестве переключателя и сохранить его во всех размерах. Тогда вам просто нужно изменить class="navbar-brand" на class="navbar-brand d-block", чтобы переопределить "display:none" из .navbar-brand в разных размерах. Вы можете использовать следующий фрагмент кода как идею, которая немного отличается от официальной документации. Запустите его на полную страницу и измените размер окна.

Если вы хотите добавить любой стиль CSS. Попробуйте сделать что-то вроде 

<div class="navbar-brand newstyle">

, затем добавьте .newstyle { something here } в свою таблицу стилей CSS вместо непосредственного изменения бренда navbar, если вы не уверены, что собираетесь переопределить стиль начальной загрузки css для всех navbar-brand s. на вашем сайте. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm">
<div class="container-fluid d-block">
  <div class="row">
    <div class="col-12">
      <a class="navbar-brand navbar-toggler d-block" data-toggle="collapse" data-target="#collapsibleNavbar" href="#">Navbar</a>
     </div>
  </div>
  <hr>
  <div class="row">
  <div class="col-12">
  <div class="collapse show navbar-collapse" id="collapsibleNavbar" aria-expanded="true">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>    
  </div>
  </div>
</div>
</nav>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...