I have followed the documentation on how to use Scrollspy in BS4, but it is not working, so how do I solve it?
My body has posistion: relative
This is my body tag:
<body data-spy="scroll" data-target=".navbar">
And this is the HTML for the navbar:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<a class="navbar-brand" href="/">
<img src="/images/logo_placeholder.jpg" width="90" height="45" class="d-inline-block align-top" alt="">
Jalinen
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#home">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nieuws</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Diensten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Calamiteiten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallerij</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Why is it not working?
Note:
Nothing works atm.
The navbar doesn't even stick to the top of the page.
Make sure you're using fixed-top to attach the navbar to the top,
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
..
</nav>
and the body tag:
<body data-spy="scroll" data-target="#navbar1" data-offset="70">
Bootstrap 4 Scrollspy Demo
EDIT:
navbar-toggleable-md has changed to navbar-expand-lg in Bootstrap 4.0.0
You content sections must have unique ID (#about) which is connected to an anchor in the navigation. (Your #home ID is valid only)
Correct:
<li class="nav-item active">
<a class="nav-link" href="#home">Home </a>
</li>
Wrong:
<li class="nav-item">
<a class="nav-link" href="#">Nieuws</a>
</li>
My BS4 sticky-top navbar started scrolling up and disappeared when scrolling down.
Removed the CSS below I added for some purpose and worked again.
body, html {
height: 100%;
}
Bootstrap 3.3.7 puts the active class on the li element, and bootstrap 4 puts the active class on the a tag. Make sure to set styles accordingly.
For a sticky navbar, assign the class .fixed-top to the navbar.
Class active .active is the solution.
Just add this to your css styles:
.nav-link.active {
background-color: white;
color: #f4511e;
}
That .active makes the difference.
Change background-color and color at your will.
Also it is important to set:
body {position: relative}
Related
I have the navbar below, but right now, when I open the page on the browser, the items inside ul class="navbar-nav mr-auto" are not displayed entirely because are placed behind the navbar-brand image. Anyone knows how to fix that?
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand pr-3" href="#">
<img th:src="#{/img/banner.jpg}" class="d-inline-block align-top pl-3" alt="Kleber App Store">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse pl-3" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
css for this page
body {
min-height: 75rem;
padding-top: 4.5rem;
}
.navbar-brand img {
top: 0;
position: absolute;
}
You can modify the class and also you dont need position absolute on your CSS file. This action will adjust your image to your layout, trusting you are working with bootstrap, I have removed as well your th:src since it is not necessary as well, check this code below.
<img src="#{/img/banner.jpg}" class="d-inline-block align-top pl-3 img-fluid" alt="Kleber App Store">
By adding to your class img-fluid, your image will adjust to any screen or layout and fit only where it belongs, make sure that image is not that big too and remove the position from your CSS.
I have already defined my Navbar and it works perfectly fine, except I want to give a full page background to the Navbar links as well. Currently when I want to open the page on a mobile device, the links background doesn't cover the whole page horizontally, but instead it looks like a highlighted line. For more detail see the screenshots. I would appreciate if someone can help me with this. Thanks!
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="#backrondimage"><img src="img/homepage.png" alt="" class="hompagecover"></a>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#div1" class="navbaritems"> Portfolio </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div2" class="navbaritems">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div3" class="navbaritems">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div4" class="navbaritems">Resume</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<img src="img/email.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
<li class="nav-item active">
<img src="img/linkedin.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
<li class="nav-item active">
<img src="img/twitter.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
</ul>
</div>[![enter image description here][1]][1]
</nav>
You could try this:
<nav class="navbar navbar-expand-sm navbar-light fixed-top p-0">
Try adding the below style:
.navbar.scrolled .navbar-collapse{
background: #116980;
margin: -15px;
padding: 15px;
z-index: -1;
}
The above lines would assign background color to .navbar-collapse when scrolled down. However since .navbar-collapse contains margin, the above code would remove the margin and change it to padding while move .navbar-collapse to back to prevent it from covering .navbar-brand and .navbar-toggler.
I am new to Angular/Bootstrap and currently trying to put an image on top of the navigation bar in the top left corner. Using padding/margin could fix the problem with a normal resolution/static screen size, changing the size put the image elsewhere.
I have tried to use padding and margin, but as I said, it was not possible, to make it "sticky" in the top left corner, when changing the browser sice.
Also using the bootstrap classes, for example "pull-right" (just for test-cases) did not work.
My current code looks like:
<header>
<div class="cloud">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark $green static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" class="pull-right" alt="" width="431.27" height="55.35">
</a>
<button class="navbar-toggler" 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">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="first">
<h1>TestSite</h1>
</div>
</header>
I expected an image in the top left corner that is responsively staying there while changing browsersizes/devices
Please check this code to see, whether this is the desired result. Fully working demo is available here
Main Changes made on your code is.
added CSS class bg-dark and removed $green static-top on nav. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
fixed the width of brand image to 50%, using css. This can be changed to some other value.
removed width and height attributes from img tag.
.navbar-brand img{
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">
</a>
<button class="navbar-toggler" 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">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
I am using a collapsible navbar where the button only appears when the window is small enough. So I'd like the links aligned center, and the button aligned left, whenever the window is small.
The problem seems to happen when I include certain Bootstrap classes on the button, those classes for some reason force the links to align left.
<nav id="nav" class="navbar navbar-expand-sm navbar-light justify-content-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li id="NavbarLinks" class="nav-item">
<a class="nav-link" href="Home.php">Home</a>
</li>
<li id="NavbarLinks" class="nav-item">
<a class="nav-link" href="Services.php">Services</a>
</li>
<li id="NavbarLinks" class="navabr-item">
<a class="nav-link" href="BookAppointment.php">Book Appointment</a>
</li>
</ul>
</div>
</nav>
Are you trying something like this? If I'm understanding right you want the toggle button to be on the left side, but the links themselves at the center when the navbar expands?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav id="nav" class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse text-center" id="collapsibleNavbar">
<ul class="navbar-nav mx-auto">
<li id="NavbarLinks" class="nav-item">
<a class="nav-link" href="Home.php">Home</a>
</li>
<li id="NavbarLinks" class="nav-item">
<a class="nav-link" href="Services.php">Services</a>
</li>
<li id="NavbarLinks" class="navabr-item">
<a class="nav-link" href="BookAppointment.php">Book Appointment</a>
</li>
</ul>
</div>
</nav>
You can do this in CSS, using #media. Here is an example (I am not sure if this is what you want)
#media (max-width:767px) {
.navbar-toggler {
left: 0px;
}
.nav-item {
text-align: center;
}
}
I have searched a lot, but havent found a simple solution for the problem.
When you click the button it opens and do not close again, any suggestion of what can be missing? Thanks in advance
<nav class="navbar navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="midia/logo.jpg" alt="Tutto Piccolo">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarResponsive" >
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav 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="#sobre">Sobre a Tutto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#colecao">Coleção</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contato">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cliente">Área do Cliente</a>
</li>
</ul>
</div>
</div>
</nav>
In Bootstrap Docs, it states that
Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
So, change <nav class="navbar navbar-expand-md sticky-top"> to <nav class="navbar sticky-top">
JSfiddle example.