Fixed navbar with bootstrap
You can find an example on the bootstrap website.
http://getbootstrap.com/examples/navbar-fixed-top/
Or you can change
<section id="headnev" class="navbar topnavbar">
to
<section id="headnev" class="navbar navbar-fixed-top">
in your header file and remove:
// Script for top Navigation Menu
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > 100) {
jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar');
jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin');
} else {
jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar');
jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin');
}
});
from custom.js
Bootstrap 5 navbar and fixed-top position
When using position:fixed the element is removed from the normal DOM flow so it no longer relates to other page elements including its parent container.
If you want limit the navbar to the container width, use the container inside the navbar to wrap the navbar content...
<nav class="navbar fixed-top navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="n-index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatti</a>
</li>
</ul>
</div>
</div>
</nav>
https://codeply.com/p/AFQj4wf6DD
Fixed Bootstrap Navbar Not Working
.navbar {
padding: .8rem;
}
.navbar-nav li {
padding-right: 25px;
}
.nav-link {
font-size: 1.1em;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav nav-pills ml-auto">
<li class=nav-item active>
<a class="nav-link" href="#home">Home</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</li>
<li class=nav-item>
<a class="nav-link" href="#aboutme">About</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div style="height: 5000px; background-color: red; width: 500px;"></div>Bootstrap 4 Nav Bar fixed-top over content
I fixed this so now the content will always start after the fixed nav bar.
I added the below to the body css
min-height: 51.5rem;
padding-top: 2.5rem;
Thank you @ZimSystem for pointing me in the right direction.
Bootstrap fixed navbar blocking content link to on the page
Found the answer:
Instead of sticky-top, I used fixed-top, then added
body {
padding-top: 70px
}
to the CSS and
window.addEventListener("hashchange", function() { scrollBy(0, -70) })
to the script.
See here: https://jsfiddle.net/ao3b0m95/
Edit: I don't think I need the CSS, just the JS will do the job.
Bootstrap navbar-fixed-top class, not working
Because you are using the newest version of bootstrap (bootstrap4 beta6).
They change from .navbar-fixed-top to .fixed-top
You have to read document in this link.
Elements hide behind .fixed-top navbar - Bootstrap
An appropriate solution would be to add padding-top to the start of your main content based on the height of the fixed navbar. See the changes I made below.
I added fixed-height on .jumbotron only to test the scroll.
:root {
--body-font: "Roboto Mono", monospace;
--main-font: "Caveat", cursive;
--secondary-font: "Dosis", sans-serif;
--primary-color: salmon;
--secondary-color: rgb(71, 66, 65) --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.navbar-brand {
font-family: var(--main-font);
font-size: 22px !important;
}
.text-secondary {
color: rgb(94, 94, 94);
}
.jumbotron {
height: 3000px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="I'm Marizabelle Aldana, 27yo developer based in Guatemala, currently living in London.">
<title>Marizabelle's website - Homepage</title>
<link rel="stylesheet" href="src/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Anton&family=Caveat:wght@600&family=Dosis:wght@700&family=Roboto+Mono:wght@200&display=swap" rel="stylesheet" />
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand text-secondary" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-secondary" href="about.html">About me</a
>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="project.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="about.html#email">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<section style="padding-top: 4em;">
<div class="jumbotron jumbotron-fluid position-relative">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div id="greeting">
<img id="cat-icon" class="rounded mx-auto d-block pt-5" src="https://img.icons8.com/external-tulpahn-flat-tulpahn/64/000000/external-happy-cat-emoji-tulpahn-flat-tulpahn.png" />
<br />
<div class="sentence text-center">
Hi
</div>
</div>
</section>
</body>How do I make my fixed navbar unfixed when it is a smaller screen using bootstrap?
In your style.css
.fixed-top{
position: sticky;
...
}
With media query you can achieve as
@media (max-width: 768px){
.fixed-top {
position: static;
}
}
Bootstrap 4 Fixed top navbar shows collapsed and hides content
You need to use the navbar-expand class to make the navbar show, otherwise it will be collapsed (since mobile is the default state).
https://www.codeply.com/go/HQbDGFwvxp
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item-active">
<a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
If you don't intent to use the mobile collapsible menu, just remove the navbar-collapse...
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<ul class="navbar-nav">
<li class="nav-item-active">
<a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
</ul>
</nav>
Similar questions
Bootstrap Navbar list items/links not showing
Disable responsive navbar in bootstrap 4
Note: When using the fixed-top Navbar, Bootstrap recommends adding padding to the top of the body to prevent content from being hidden by the Navbar..
body {
padding-top: 56px;
}
Demo
Related Topics
Text-Align: Right; Only for Placeholder
How to Use the Same Meta Tag for Opengraph and Schema.Org
Internet Explorer 11 Word Wrap Is Not Working
Bootstrap Grid, Do I Need a Container
Div with Triangle at the Bottom with Background Image
How to Tidy Up an HTML File's Indentation in Vi
Making a Custom Input Text Type
Changing Variable Dynamically (At Runtime) via Less and CSS
Equal Width Using Flex and Border-Box
Why Does Vertical-Align: Text-Top Make Element Go Down
Float Puts Submit Button Outside of Div
Setting Overflow: Scroll on a Table with Display: Flex