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/
Related
I'm trying bootstrap but the js isn't working in nav (dropdown + mobile icon)
This is my html:
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">TEST <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Pulse <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<a class="dropdown-item" href="https://jsfiddle.net/bootswatch/0mb9487u/">Open in JSFiddle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../4/pulse/bootstrap.min.css">bootstrap.min.css</a>
<a class="dropdown-item" href="../4/pulse/bootstrap.css">bootstrap.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../4/pulse/_variables.scss">_variables.scss</a>
<a class="dropdown-item" href="../4/pulse/_bootswatch.scss">_bootswatch.scss</a>
</div>
</li>
</ul>
</div>
</nav>
Others topics for js issue with bootstrap don't help me...
Make Sure that you have to add all these cdn in your head section
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
Don't know what files you've imported in your html, but if you didn't imported bundle js file, then you need to import popper.js file too. in total you need following 4 files for the bootstrap to work:
bootstrap.min.css
jquery (latest is recommended, check bootstrap doc)
popper.js
bootstrap.min.js
number 2, 3, 4 - order matters
Hope that helps...
I've never seen something like this and i'm wondering how did you come up to use bootstrap in such way. You are doing it completely wrong, you do not import .css/.js file directly in html tag, you specify these libraries in proper places in code. You need to start from beginning and read about how to use bootstrap, example good source for it is in here:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
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!!
The toggle button is not working to reveal the collapsed elements and I do not know why. When the window is resized the toggle button is displayed but upon pressing, nothing happens. This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes. Any help is appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container"></div>
<li>
<a class="logo" href="#1"></a>
</li>
<li>
<a class="cart" href="#7"></a>
</li>
<button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul>
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You have at least a few problems: See the docs for the Navbar.
data-toggle="dropdown" should be data-toggle="collapse"
data-target="navHeaderCollapse" should be data-target=".navHeaderCollapse"
Fixing these two issues should allow the menu to open and close. You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the navbar-header class as well as the .nav & .navbar-nav classes on your menu list items. Also your container isn't doing anything currently, it should surround the navbar-header / list items.
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LOGO
<span class="glyphicon glyphicon-shopping-cart"></span>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The reason that your navbar toggle button isn't working is that you've missed 3 things.
You need to change data-toggle="dropdown" to data-toggle="collapse".
You need to change data-target="navHeaderCollapse" to data-target="#navHeaderCollapse".
You need to add id="navHeaderCollapse" to the div with the collapse css class.
Once you have all these elements the toggle will work. There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first <li> elements not being within an <ul> tag.
Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/
Try using the # symbol in data-target attribute to refer on an element whose using this ID.
<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">
And add an ID attribute to your .navbar-collapse element
<div id="navHeaderCollapse" class="collapse navbar-collapse">
Refer to the docs
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap
Collapse plugin
You may make this as like i did by bootstrap. some classes in your code i didn't recognize its bootstrap included or not. thanks
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
I had faced the same issue.
I used data-toggle cdn in the head section and it worked in my case. For more info check the link.
Use https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css in head part of HTML.
Check whether you have used all related CDNs.
I have a webpage with 3 items in the navbar; Products, Partners and Support. I have moved this navbar to a seperate .html file; navbar.html and called it using load-navbar.js. I have done this to avoid code repetition. Is it possible to use javascript to show which navbar item is active? Is it possible to use switch statements to do this. If yes, how can I do this?
navbar.html
<nav class="navbar navbar-default mc-header navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img id="logo" src="images/logo.svg" alt="Company Logo">
</div>
<div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
<ul class="nav navbar-nav navbar-right" >
<li><a class="mc-active" href="Items/products.html">Products</a></li>
<li>Partners</li>
<li>Support</li>
</ul>
</div>
</nav>
load-navbar.js
$(function(){
$("#main-nav").load("main-nav.html");
});
The mc-active class in products is added to the class to show that products.html is the active class.
You can store the current url in a variable:
var x = $(location).attr('href');
And then assign an "active" class to a link if the href matches the url, or if it's href is contained within the url, whichever fits your situation. You can use this link:
css-tricks link
or this search:
jquery active link google
for more info that might fit your situation better. I don't think you'd need more than a simple comparison between the window href and link href. Also I'd definitely follow the advice given in the comments.
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/