I am trying to make a navbar that changes the style of a particular navbar link to active as the user scrolls down the page. I am trying to do this using Bootstrap's scrollspy feature.
I checked and there are many comprehensible tutorials on this (e.g. https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp or https://mdbootstrap.com/docs/standard/navigation/scrollspy/#example-3).
Although I believe I followed them to the letter, the effect just does not seem to work. I am afraid this may have to do something with the changes to mechanics of the spyscroll feature due to the abandonment of JQuery by BS5. But it very well may by an error in my code, although I did my best to follow the tutorials to the letter.
My code:
(a) included external files:
<link rel="stylesheet" href="BS5/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="BS5/css/styles.css" /> <!-- BS customising css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="BS5/js/bootstrap.js"></script>
<script src="BS5/js/jsko.js"></script> <!-- non related custom scripts -->
(b) style tag
<style>
body
{
position: relative;
}
</style>
(c) body tag
<body data-spy="scroll" data-target="#navbarko">
(d) navbar tag
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top nav-larger" id="navbarko">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"/></a>
<button class="navbar-toggler" 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="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission">Our mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#debt">Debt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#finadv">Finland</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
(e) beginning of the section tags throughout the page:
<section class="feature grad_third" id="mission">
<section class="feature grad_third" id="debt">
<section class="feature grad_third" id="finadv">
<section class="companies references" id="references">
<section class="feature grad_third" id="contact">
Many thanks beforehand for your time and help.
Things have changed slightly in Bootstrap 5 - and the W3Schools tutorial is Bootstrap 4.
So you need to change your body tag to (note the 'bs', for Bootstrap):-
data-bs-spy="scroll"
More on this here:-
https://getbootstrap.com/docs/5.0/migration/#javascript
Data attributes for all JavaScript plugins are now namespaced to help
distinguish Bootstrap functionality from third parties and your own
code. For example, we use data-bs-toggle instead of data-toggle.
Related
I am essentially trying to create active classes with Bootstrap to display a nav-pill/container around the active section of my webpage. This works fine on larger screens, but on smaller screens, with the hamburger menu active the nav-pill stretches across the entire div/container, but I want it to wrap around only the word similar to when it is a large screen.
Here is a codepen with some filler content to mimic my issue: https://codepen.io/100emoji/pen/mdxdpzp
and the code for the navbar only:
<!-- Bootstrap-5 -->
<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>
<!-- Body -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="400" data-bs-smooth-scroll="true">
<!-- Navigation Bar-->
<nav id="navbar" class="navbar navbar-expand-md bg-dark navbar-dark py-3 sticky-top">
<div class="container">
Ken's Art & Frame
<button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon mid-bar"></span>
<span class="toggler-icon bot-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav nav-pills ms-auto">
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Artwork
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
I can only find solutions using bootstrap 4 through google
https://getbootstrap.com/docs/5.0/components/navbar/#containers
I think this is what you are looking for. Essentially you wrap a container around your UL to control the size.
The other option is to use the bootstrap width classes on each individual <li> like this:
<li class="nav-item w-50">
Or do it via CSS on <li> tags:
li {
width: 30%;
}
Not a native English speaker so prepare for typos.
I was wondering why my nav and sidebar are being shown twice on my html page when i look at it in a browser.
So you'd know what I'm talking 'bout here's a screenshot:
Right now my main page looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schadedossier #yield('title')</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://soshandyman.blob.core.windows.net/themes/bs4-insurance.css">
</head>
<body>
<!--wrapper(the thing around the sidebar and the nav)-->
<div class="d-flex" id="wrapper">
<!--sidebar-->
<div class="bg-light border-right collapse" id="sidebar-wrapper">
<div class="sidebar-heading">logo</div>
<div class="list-group list-group-flush">
Tussenpersoon
Woning
Schadedossier
Data schadedossier
Verzekeringsnemer
<button class="btn btn-outline-secondary">Contract raadplegen</button>
</div>
</div>
<div class="container-fluid p-0">
<!--page content-->
<div id="page-content-wrapper">
<nav class="navbar navbar-light bg-light border-bottom">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar" id="navbarSupportedContent">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a class="nav-link active" id="aangifte-tab" data-toggle="tab" href="#aangifte" aria-controls="aangifte">Aangifte</a>
</li>
<li class="nav-item">
<a class="nav-link" id="details-tab" data-toggle="tab" href="#details">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="overzicht-tab" data-toggle="tab" href="#overzicht">Overzicht</a>
</li>
<li class="nav-item">
<a class="nav-link" id="evaluatie-tab" data-toggle="tab" href="#evaluatie">Evaluatie</a>
</li>
</ul>
</div>
</nav>
<!--start tab content (here starts the nav aangifte and so on)-->
<div id="myTabContent" class="tab-content">
#yield('content', View::make('childAangifte'))
</div>
<!--end page content-->
</div>
<!--endsidebar-->
</div>
<!--endwrapper-->
<!--incert bootstrapscripts here-->
</body>
Then this is my child's code:
#extends('welcome')
#section('title')
aangifte
#endsection
<!--incert html-->
#endsection
Anyway I'm having trouble with this because this is not the only child i need to display but if this will form an issue every time then I rather want to know before I try to get the other ones to work.
Also what option would be better to use switch or if to go to the other children?
Thanks a bunch and sorry for the terrible formatting.
Within my home page, I am using img tag where the source is from a static folder.
<!DOCTYPE html>
<html xmlns:th="http://thymeLeaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<!-- <html xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="https://www.thymeleaf.org"> -->
<head>
<title> Home </title>
<object th:include="fragments/fragment :: css" th:remove="tag"></object>
<object th:include="fragments/fragment :: js" th:remove="tag"></object>
</head>
<body>
<nav th:replace="fragments/fragment :: navbar"></nav>
<img style="width: 100% ; background-size: cover;" th:src="#{/img/webconstruction.png}">
</body>
</html>
</body>
and this is my fragment
<head>
<title> Home </title>
<head th:fragment="css">
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
</head>
<!-- jquery, ajax, and bootstrap.js -->
<head th:fragment="js">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script th:src="#{/js/bootstrap.min.js}"></script>
</head>
</head>
<body>
<header th:fragment="navbar">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #9be3de;">
<a class="navbar-brand mb-0 h1" th:href="#{/}">SIKOPERASI</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="#{/home}">Home <span class="sr-only">(current)</span> </a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item active">
<a class="nav-link" th:href="#{/anggota}">Anggota</a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item active">
<a class="nav-link" href="#">Pinjaman</a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item active">
<a class="nav-link" th:href="#{/simpanan}">Simpanan</a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item active">
<a class="nav-link" th:href="#{/register}">Register</a>
</li>
</ul>
<!-- <button class="btn btn-outline-danger" th:text="Logout">
<a th:href="#{/logout}"></a>
</button> -->
<div sec:authorize="isAuthenticated()">
<div class="navbar-nav pull-right">
<a class="nav-link" th:href="#{/api/user}" th:text="${#httpServletRequest.remoteUser}"></a>
<!-- <div style="padding-top: 10px ; padding-right: 20px" th:text="${#httpServletRequest.remoteUser}"></div>-->
<a class="nav-item nav-link active btn btn-danger" th:href="#{/logout}">Logout</a>
</div>
</div>
<div sec:authorize="!isAuthenticated()">
<div class="navbar-nav pull-right">
<a class="nav-item nav-link active btn btn-primary" th:href="#{/login}">Login</a>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
I have looked around whether if there is an error on my understanding regarding using an image from a folder in thymeleaf, and there is nothing wrong with it. Yet this is what I got.
When I first open my localhost, it will redirect me to a not-login state like this:
As you can see, the image got an error like that. I tried to login and when I log in, the page should have been redirected to the home page that shows the authenticated fragments. However, this is what I got:
It is not something that I want. However, when I manually retype localhost:2017/home, it will redirect me to the page that I was hoping to see.
This is my websecurityconfig:
protected void configure(HttpSecurity http)throws Exception {
http
.authorizeRequests()
.antMatchers("/home").permitAll()
.antMatchers("/css/**").permitAll()
.antMatchers("/js/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.defaultSuccessUrl("/home")
.loginPage("/login")
.permitAll()
.and()
.logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).logoutSuccessUrl("/").permitAll();
}
What I want is to make the image appear when it is still not in login state and after login, it will redirect to the last image instead of the second image. This is how my folder looks like:
Well as per your configuration I can see that img path is not in permitAll list.
Which means you wont be able to access any img resource without login in.
So you see img error as described in your post.
Since your img url was last one being triggered before giving error, on login it will redirect to same url after login.
Thus you see Under Construction page.
How to resolve it?
You can add your /img path in permitAll list or atleast the one with Under Construction.
.antMatchers("/img/**").permitAll()
This will be lot's of typing involved.
I've got a page I need to slightly change design when the size is decreased. Including but not limited to some parts of menus swapping places and extra design features on some fields
At the moment I am trying to strictly stick to Bootstrap 4 documentation on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)
Just giving an example of one of the menus
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Navigation Menu</title>
<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>
<script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"><\/script>')</script>
<script src="Libs/Popper/popper.min.js"></script>
<script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">
<link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">
<a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">
<!-- Carousel -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-navbar" id="main-navbar">
<ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">
<li class="nav-item">
<a class="nav-link" href="#">PRODUKTE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIENSTLEISTUNGEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">UNTERNEHMEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NEWSROOM-STORY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPOTLIGHT:TECHNIK
<?php //echo $spotlight; ?>
</a>
</li>
</ul>
<ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">
<li class="nav-item">
<a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>
</li>
<li class="nav-itemv">
<a class="nav-link text-danger" href="#">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DATENSCHUTZ</a>
</li>
<li class="nav-itemv">
<a class="nav-link" href="#">KONTAKT</a>
</li>
</ul>
<!-- Language Menu -->
<ul class="nav navbar-nav mr-auto language-menu" id="language-menu">
<li class="nav-item">
<a class="nav-link" href="#">DE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
And the extra css is as follows
.smaller_font{
font-size: 80%;
}
#include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}
At the moment I am trying to use #include media-breakpoint-down(md){...}
But I get no reaction from the design which does absolutely NOTHING when I decrease the size.
The idea is that the fields in the menu are going to have 1px bottom border.
I know that there's also an option of making invisible elements and then making them visible as discussed here bootstrap 4 responsive utilities visible / hidden xs sm lg not working
or setting width in pixels with "#media" tag but using "#include media-breakpoint-down()" tag seems to make more sense overall (just a gut feeling).
I need someway to get things to work on small scale, so that I can build from there :-)
"At the moment I am trying to use #include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."
This isn't CSS...
#include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}
It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.
Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.
So I'm following a tutorial online (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/) and following the code exactly, but for some reason, my navbar is not appearing the way it should be. My friend (who's way more experienced with web dev) took a quick look at the code and couldn't figure out what was wrong. So I thought I'd post my problem here.
I'll also show you my working directory (just in case you're wondering if the files are all in the same directory):
Here's the code in case you want to try it yourself
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I had a similar problem using bootstrap v4. The previous answers code worked well for me but just wanted to clarify that the part that made the vertical navbar horizontal was to use navbar-expand-lg in the main div tag.
<nav class="navbar navbar-expand-lg">
Changing the lg to another size (md, sm or xs) is also helpful depending on your screen sizing preferences.
Hope this helps
I'm asuming you are using the latest Bootstrap.
You have to add navbar-defaultto your <div class="navbar"> and navbar-nav to your <ul class="nav">.
Which gives you the following markup.
<div class="container">
<h1>Bootstrap Site</h1>
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Working Example
For future problems, try reading the official Bootstrap Docs before asking here. They explained everything very detailed.
BT Navbar
I guess your problem is, that the sitepoint tutorial uses an older Bootstrap Version, than the one you downloaded and use.
If you want your navbar to be always horizontal just make it like this:
<nav class="navbar navbar-expand">
Using navbar-expand-lg|md|sm will make it always break at some point to vertical position.
In my case I was trying some codes I found on internet based on Bootstrap version 3 but my app was based on bootstrap version 4. There exist important differences between the two versions (see here).
The following code based on v4 works for me :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The official documentation can be found here.
came across your question because I was looking to create a vertical navbar with bootstrap. I know that this question is to do the exact opposite, but since this thread was at the top of the pile on google while searching "bootstrap nav list vertical", I figured I'd leave the solution I found here.
For anyone who can't seem to get bootstrap to behave and render a vertical list, you can use the bootstrap class ".flex-column" in your tag to turn a horizontal list into a vertical one.
Here's the page in the Bootstrap documentation, scroll down till you find the subheading 'Vertical':
Cheers!
we should use pills or tabs //A grey horizontal navbar that becomes vertical on small screens // for tabs use - nav nav-tabs
<nav class="navbar navbar-expand-sm-bg-light">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href ="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href ="#">Projects</a></li>
</ul>
</nav>
Change the class of the ul tag to <ul class="nav navbar-nav">.