добавление слоя поверх navbar в bootsrap и тело, чтобы оставаться прокручиваемым - PullRequest
Новая
       13

добавление слоя поверх navbar в bootsrap и тело, чтобы оставаться прокручиваемым

0 голосов
/ 25 апреля 2020

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

<html lang="en">

<head>
    <meta charset="utf-8">
    <title> hot</title>
    <meta name="description" content="Wiredwiki App">
    <!-- Latest compiled and minified CSS -->
     <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link href="css/styles.css" rel="stylesheet">

</head>

    <style>
    body{
        padding-top: 40px;
    }
    </style>

<body data-spy="scroll" data-target="#my-navbar">
  <!-- Navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div><!-- Navbar Header-->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#feedback">Home</a>
                        <li><a href="#features">Our Services</a>
                    <li><a href="#gallery">Gallery</a>
                    <li><a href="#faq">Faq</a>
                    <li><a href="#contact">ContactUs</a>
                </ul>
            </div>
        </div><!-- End Container-->
    </nav><!-- End navbar -->

1 Ответ

0 голосов
/ 25 апреля 2020

Вы можете обернуть свой контент в navbar-fixed-top класс. 

<html lang="en">
<head>
    <meta charset="utf-8">
    <title> hot</title>
    <meta name="description" content="Wiredwiki App">
    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link href="css/styles.css" rel="stylesheet">
</head>

<style>
    body {
        padding-top: 90px;
    }

    .root {
        
        min-height: 100vh;
    }
</style>

<body data-spy="scroll" data-target="#my-navbar">
    <div class="navbar-fixed-top">
        <p>I am top of navbar</p>
        <!-- Navbar -->
        <nav class="navbar navbar-inverse" id="my-navbar">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div><!-- Navbar Header-->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#feedback">Home</a>
                            <li><a href="#features">Our Services</a></li>
                            <li><a href="#gallery">Gallery</a></li>
                            <li><a href="#faq">Faq</a></li>
                            <li><a href="#contact">ContactUs</a></li>
                        </li>
                    </ul>
                </div>
            </div><!-- End Container-->
        </nav><!-- End navbar -->
    </div>
    
    <div class="root">
        <p>MY HEIGHT IS TOO LONG</p>
    </div>
</body>
...