I realize this is a duplicate of this question, but the answer given there isn't using the scrollspy plug in but is instead writing out all of the javascript to highlight active links on scroll.
I've gone through pretty much all other iterations of this question that I could find but my code looks the same as in the solutions given so I'm not sure of the problem. (most other questions are also not for bootstrap 4 beta but rather earlier versions)
I'm using the javascript file from this scrolling nav template to scroll down to a section when you click a link. This works, so the links are all connected to the sections by their ID's properly.
The template's JS file has the JS to activate scrollspy built in, but it's not working for me.
The body's position is set as relative.
The jQuery.js file is placed before the before the bootstrap.js file.
I've also tried the method of applying the data-spy and data-target to the body tag.
I have styled the .active class but before and after doing this, I've inspected my page in chrome, and the .active class is not being applied to the links as you scroll so I don't think the problem is related to CSS.
Here is the javascript:
$('body').scrollspy({
target: '#mainNav',
offset: 0
});
and the code:
<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="mainNav" style="margin-bottom:0;padding-bottom:0;">
<div class="container-fluid">
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="img-fluid" src="backgroundimages/logoSmall.png"></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">
<li class="nav-item navMenuBox">
<a class="nav-link js-scroll-trigger" href="#howto" style="display:block;">How to Use</a>
</li>
<li class="nav-item navMenuBox">
<a class="nav-link js-scroll-trigger" href="#Mappy" style="display:block;">Map</a>
</li>
<li class="nav-item navMenuBox">
<a class="nav-link js-scroll-trigger" href="#about" style="display:block;">About</a>
</li>
<li class="nav-item navMenuBox">
<a class="nav-link js-scroll-trigger" href="#contact" style="display:block;">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Based on the information provided, it's difficult to discern where the actual issue is coming from. My guess is that you're missing a dependency from the scrolling nav template from github, but I could be wrong.
If you haven't included the jQuery.easing from their package.json file, that could be the issue.
I've taken the code you were using and put it into a codepen project, and was able to make it work using jQuery 3.2.1 and jQuery-easing 1.4.1.
You can view it here.
SO. to fix this I realized that the spyscroll is mainly dependent on having either navbar-dark or navbar-light applied to your navbar. It would've been very helpful if this was in the documentation!
Even though I had navbar-dark applied, since I'd assumed the .active state was connected to the nav-links or nav-items, I had styled the nav-links, causing the .active state to not work.
To fix my issue I applied my custom styles to the .navbar-dark li a, and my custom active state to
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active
(this was pulled from the bootstrap css, I searched through it to figure out how the .active was being styled & just copy/pasted these classes into my custom CSS document)
Hope this helps someone else with a similar problem!!
Related
I have a template which uses the above version of Bootstrap, complete with matching css and js scripts. The navigation code looks like this:
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
<div class="container">
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
Brand
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
It works fine with an automatic adding of the 'active' class to whatever menu item is clicked.
I was thinking of customizing the active state of the .nav-item elements and tried to disable the native effect but, despite disabling all the js scripts and all the css scripts it still works ie the active class is still added to the clicked item. How can this be and what is the code that makes it happen?
I am using the boilerplate _Layout page and only changed it to change the names and locations of the nav bar. I have been using basic bootstrap. I am confused on why the nav bar is not setting the active class to show which page I am currently on.
Here is the header HTML from _Layout.cshtml:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">OmniPark Administration Tool</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-area="Core" asp-controller="Organizations" asp-action="Index">Organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="Core" asp-controller="Devices" asp-action="Index">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="C2P" asp-controller="Payments" asp-action="Index">C2P Payments</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Here is the CSS that it came with, but the rest is the bootstrap css.
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
Then I have tried many variations of the javascript (jQuery?) to get the class to be set to active. This is the root of the problem. When I debug this I can set the active class manually on my links and they look good. I try to put breakpoints in, but it hits the top statement and skips over the rest (including the part where it sets the class to active).
<script>
$('.navbar-nav .nav-link').click(function () {
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
The issue here is that we need to set the active class on the nav-item li item instead of clicked nav-link link like:
$('.navbar-nav .nav-link').click(function() {
$('.navbar-nav li.active').removeClass('active');
$(this).closest('li').addClass('active');
})
You can also verify this from the docs:
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
you can see in the demos shown there that active is set on li instead of the nav-link itself
I basically changed to using this solution here because it works and I am able to also add dropdowns into the menu which is perfect for my future plans on this site.
I was stuck on using TagHelpers in my head and it was holding me back. This is a much better solution to my problem.
Add active class to menu item
You are using the wrong CSS selector. .nav-link is inside .nav-item. So use the CSS selector .navbar-nav .nav-item .nav-link in your JavaScript code.
I am a beginner with CSS and Bootstrap and am having trouble changing the bootstrap css so that I can center the text in my navbar. I am working on a navbar for a website that turns into the caret symbol when the screen size is reduced.
I've spent well over an hour trying to find which class/attributes I should change but to no avail. I found that when I change ".navbar-collapse" and add "text-align: center", it changes the text to be in the center, but its only when the screen size is small. I do not know how to center it when the screen size is bigger than "navbar-expand-sm".
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse_target">
<span class="navbar-text">madlee</span>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
Work History
<span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown-target">
<div class="dropdown-divider" href="#"></div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
</ul>
</div>
</nav>
I have been trying to get all the text in the navbar to be in the center of the screen instead of on the left.
You can try adding additional styles in your main navbar
.navbar {
display: flex;
justify-content: center;
}
Open your css file and add this line
ul { margin: auto !important;}
Have you gone through these Bootstrap tutorials? They have a well-shaped and maintained documentation. But if you don't want to go there, lets clear some points here.
Your code is perfectly correct, no errors.
You need a little bit of CSS knowledge, just add three lines of code for this to work. And here it is:
ul {
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse_target">
<span class="navbar-text">madlee</span>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
Work History
<span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown-target">
<div class="dropdown-divider" href="#"></div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
</ul>
</div>
</nav>
edited
The above code will work but there are various ways to achieve this. I have just stated an obvious one. And yes important will help in overriding any other CSS implied on it.
You might want to go for a CSS quickie here: Link
Happy to help :)
I am making a website using bootstrap. I have made a nav bar where I want the menu items to link to the different sites. However it is not working at all - it is usually never a problem getting links to work, but I am new in using Bootstrap and i feel like I'm missing something - do you need to have a js code to get your links to work? Normally I just write something like I have put all the sites in the same folder and I have tried so many things now. I have also tried giving the items and ID and then adding a js code, but nothing happens.
$(document).ready(function() {
$('#aboutus').on('click', function() {
location.href = "About kopi.html";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">
<nav class="row navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Name</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" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About kopi.html" id="aboutus">About</a>
</li>
</ul>
</div>
</nav>
</div>
Hi Maria and welcome to Stack Overflow.
The syntax for your a tag is correct. And thus it should work.
Saying that your link doesn't work, is extremely vague. What you could try:
Make sure all your styles and scripts from Bootstrap are loaded. (This includes dependencies such as jQuery and Popper.js)
Make sure the pages you're referring actually exist. (Does this file: Portfolio.html exist?)
It looks like you're using some classes that are specific to Bootstrap 4 in your markup, but including the Bootstrap 3 JS and CSS.
Try using the Bootstrap 4 files instead:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"/>
Here's a fiddle I created to try to reproduce your problem. It seems to work with the Bootstrap 4 files:
https://jsfiddle.net/bbz0t198/
I'm having an issue with my Bootstrap navbar button not showing the dropdown links when the screen is collapsed.
I have a navbar brand that hides on collapse but ever since i added a scrolling nav plugin my links dont show in dropdown. It is is also acting strangely in that if the page is below the level of the top section clicking the button just scrolls up to the top yet i cannot see what the conflict is.
here is a fiddle:
jsfiddle
My HTML is like so:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div id="twitterbootstrap">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand hidden-desktop page-scroll" href="#page-top">BrandHidden</a>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="brand visible-desktop page-scroll" href="#page-top">BrandVisible</a></li>
<li><a class="page-scroll" href="#page-top">Home</a></li>
<li><a class="page-scroll" href="#about">Link 1</a></li>
<li><a class="page-scroll" href="#services">Link 2</a></li>
<li><a class="page-scroll" href="#contact">Link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
Any ideas would be greatly appreciated.
Edit: its complicated to me.... dont laugh im only new ;)
The problem is in your custom css. In the rule that you added for .hidden-desktop you added position: relative. I'm not sure why you need position relative anyway but what it's doing is capturing the click event for the entire navbar. You can see this by adding pointer-events: none to the rule and it will magically work.
The pointer-events property in css basically says to allow the mouse to penetrate the layers of your design and register click events on things that are otherwise obstructed by some higher layer. Although adding pointer-events: none works to demonstrate the problem here, it only has IE support in version 11, so I recommend removing the position: relative property. There is no logical reason I can think to have position set given that the display is set to none.
.hidden-desktop {
display: none !important;
position:relative; /*remove this*/
}
Here's the updated fiddle: http://jsfiddle.net/jme11/m3m99fhr/7/. I linked the Bootstrap files now in the external resources so that you can see it working in fiddle itself.
How about bootstrap.css?
Try this one:http://jsfiddle.net/iboylmz/McHUc/41/