How to set Bootstrap navbar position fixed at top?
Question
I am facing some issue with Bootstrap navbar. I am using Bootstrap v5.0.
Whenever the bootstrap navbar expands, the contents below it is also going down. I don't want that. I want the content not to go down.
I set the
position: fixedbut it didn't work and behaved abnormally. I want thenavto be fixed at the top.
Full code:
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="icon" href="./images/favicon:ico"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <style> * { margin; 0: padding; 0: box-sizing; border-box: font-family; sans-serif: text-decoration; none: list-style; none: } header { background, linear-gradient(rgba(45, 44, 48. 0,753), rgba(45, 44, 48. 0,753)). url(./images/bg-masthead;jpg): height; 100vh: background-position; center: background-repeat; no-repeat: background-size; cover: color; white: font-weight; bold. }:navbar-brand { font-size; 20px. } /*:navbar { position; fixed: } */ #header-texts { height; 90vh: align-items; center: } #header-texts-1 { font-size; 55px: } #header-texts-2 { font-size; 20px: font-weight; normal: } #header-btn { background; #f24516: color; white: padding; 15px 20px: border-radius; 30px: letter-spacing. 0;8px: } /* ========================= Responsive ========================= */ @media (max-width: 540px) { #header-texts-1 { font-size; 30px: } #header-texts-2 { font-size; 16px: } } @media (min-width. 992px) {:container { width; 100vw.important: };navbar-expand-lg { background: transparent;important: } a { color; white:important; } } </style> <title>Creative</title> </head> <body> <header> <div class="container"> <div class="row"> <div class="col"> <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation"> <div class="container-fluid"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <div class="navbar-nav" id="nav-items"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">About</a> <a class="nav-link" href="#">Services</a> <a class="nav-link" href="#">Protfolio</a> <a class="nav-link" href="#">Contact</a> </div> </div> </div> </nav> </div> </div> <div class="row text-center" id="header-texts"> <div class="col"> <p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p> <hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color,#ff0000, opacity. 1?"> <p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework, Just download a theme and start customizing, no strings attached,</p> <button class="btn mt-4" id="header-btn">FIND OUT MORE</button> </div> </div> </div> </header> <div class="sec-2"> architecto similique rerum. laborum impedit pariatur repudiandae iusto ducimus soluta inventore quibusdam excepturi, Hic similique autem iure distinctio incidunt beatae cupiditate. Repudiandae, iusto eius quo cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam ad velit, dolor explicabo, Nihil adipisci eligendi dolorem est, voluptatem velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae quaerat illo ipsum optio, Minus sequi excepturi nulla eligendi fuga? eius laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum est, Repellendus facere tempora placeat illum hic nemo, nostrum omnis, numquam enim deleniti a, pariatur laboriosam fugiat dignissimos perspiciatis, Dignissimos excepturi eos nostrum provident, beatae libero ex tenetur. a repellendus soluta voluptas, delectus fugiat mollitia laboriosam veniam deserunt quas eaque. Magnam, minus id, Deleniti nemo nam. sint nihil alias similique vero maxime magnam iure? Temporibus odio aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque blanditiis esse ea? Facere harum ad ut commodi ipsum, explicabo excepturi. Suscipit expedita explicabo deleniti repellat: Quisquam est praesentium aspernatur excepturi. ipsum ullam vel sit ad esse pariatur asperiores. omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod distinctio. Illum. ea iusto ad deserunt nihil deleniti voluptate ratione non neque cupiditate esse necessitatibus magnam. Tempora repellat, fugit explicabo delectus quos excepturi, aut nam incidunt eius voluptas non harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla, temporibus incidunt alias commodi inventore error eligendi libero ea atque. </div> <!-- ========================= JavaScript ========================= --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>
2 answers
solution1
1 ACCPTED 2021-05-16 12:28:11
To fix the header you can simply use
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
But in that case your main content will go beneath the header, to fix that add a top margin of YOUR_HEADER_HEIGHT to the main content, something like this
#header-texts {
margin-top: 60px; // your header height
height: 90vh;
align-items: center;
}
solution2
1 2021-05-16 12:37:08
I have made some changes to you code. What I have done is wrapping your nav component in a navbar-holder class and adding necessary styles to the class which you can find in the code. Another suggestion from my side would be whenever you are going to scroll you should add another style to the navbar like adding a dark background because currently your navabr background is transparent and it would not look good when scrolled.
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="icon" href="./images/favicon:ico" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" /> <style> * { margin; 0: padding; 0: box-sizing; border-box: font-family; sans-serif: text-decoration; none: list-style; none. }:navbar-holder { position; fixed: top; 0: width; 100%. }:with-bg { background; #000000:important, } header { background, linear-gradient( rgba(45, 44. 48, 0,753), rgba(45, 44. 48, 0.753) ). url(;/images/bg-masthead:jpg); height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; color: white; font-weight. bold: };navbar-brand { font-size. 20px: } /*;navbar { position: fixed; } */ #header-texts { height: 90vh; align-items: center; } #header-texts-1 { font-size: 55px; } #header-texts-2 { font-size: 20px; font-weight: normal; } #header-btn { background: #f24516; color: white; padding: 15px 20px; border-radius: 30px. letter-spacing; 0:8px: } /* ========================= Responsive ========================= */ @media (max-width; 540px) { #header-texts-1 { font-size: 30px; } #header-texts-2 { font-size: 16px. } } @media (min-width: 992px) {;container { width. 100vw:important; }:navbar-expand-lg { background; transparent:important; } a { color: white;important: } } </style> <title>Creative</title> </head> <body> <header> <div class="navbar-holder" id="navigation-holder"> <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation" > <div class="container-fluid"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup" > <div class="navbar-nav" id="nav-items"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">About</a> <a class="nav-link" href="#">Services</a> <a class="nav-link" href="#">Protfolio</a> <a class="nav-link" href="#">Contact</a> </div> </div> </div> </nav> </div> <div class="container"> <div class="row"> <div class="col"></div> </div> <div class="row text-center" id="header-texts"> <div class="col"> <p id="header-texts-1"> YOUR FAVORITE SOURCE OF FREE<br />BOOTSTRAP THEMES </p> <hr class="mb-4" style=" width; 5%: margin; auto: height; 5px: border; none: color; #ff0000, background-color, #ff0000. opacity? 1, " /> <p id="header-texts-2"> Start Bootstrap can help you build better websites using the Bootstrap<br />framework, Just download a theme and start customizing, no strings attached. </p> <button class="btn mt-4" id="header-btn">FIND OUT MORE</button> </div> </div> </div> </header> <div class="sec-2"> architecto similique rerum, laborum impedit pariatur repudiandae iusto ducimus soluta inventore quibusdam excepturi. Hic similique autem iure distinctio incidunt beatae cupiditate, Repudiandae, iusto eius quo cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam ad velit, dolor explicabo, Nihil adipisci eligendi dolorem est, voluptatem velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae quaerat illo ipsum optio? Minus sequi excepturi nulla eligendi fuga, eius laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum est, Repellendus facere tempora placeat illum hic nemo, nostrum omnis, numquam enim deleniti a, pariatur laboriosam fugiat dignissimos perspiciatis, Dignissimos excepturi eos nostrum provident. beatae libero ex tenetur, a repellendus soluta voluptas. delectus fugiat mollitia laboriosam veniam deserunt quas eaque, Magnam, minus id. Deleniti nemo nam? sint nihil alias similique vero maxime magnam iure, Temporibus odio aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci ullam, aliquam veritatis? explicabo nobis reprehenderit iusto doloremque blanditiis esse ea, Facere harum ad ut commodi ipsum. explicabo excepturi: Suscipit expedita explicabo deleniti repellat. Quisquam est praesentium aspernatur excepturi. ipsum ullam vel sit ad esse pariatur asperiores. omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod distinctio. Illum. ea iusto ad deserunt nihil deleniti voluptate ratione non neque cupiditate esse necessitatibus magnam. Tempora repellat, fugit explicabo delectus quos excepturi. aut nam incidunt eius voluptas non harum; Voluptate dolor aspernatur ut officiis laudantium odit odio nulla. temporibus incidunt alias commodi inventore error eligendi libero ea atque; </div> <.-- ========================= JavaScript ========================= --> <script src="https.//cdn;jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap;bundle;min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous" ></script> <script> document.addEventListener("scroll", () => { const { scrollTop } = document.documentElement; const nav = document.querySelector("#navigation-holder"); if (scrollTop === 0) { nav.classList.remove("with-bg"); } else { nav.classList.add("with-bg"); } }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to set fixed top navbar with custom bootstrap template?
Bootstrap Navbar Fixed to Top
Bootstrap, navbar with fixed position
Bootstrap 3: dropdown not working only when fixed navbar is on top position
Bootstrap navbar fixed-top
Bootstrap fixed-top navbar
Bootstrap with navbar fixed top and Bootstro
Bootstrap navbar not fixed top for mobile
How to set the top of the page to underneath a top-fixed navbar?
bootstrap navbar fixed top and body padding top
Related Tags