To quote the specs: The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate … Read more
I was searching for this very same thing. I had read that this was available in Bootstrap 3.0, but I was having no luck in actually implementing it. This is what I came up with and it works great. Very simple jQuery and Javascript. Here is the JSFiddle to play around with… http://jsfiddle.net/CriddleCraddle/Wj9dD/ The solution … Read more
$(document).ready(function() { $(window).scroll(function () { //if you hard code, then use console //.log to determine when you want the //nav bar to stick. console.log($(window).scrollTop()) if ($(window).scrollTop() > 280) { $(‘#nav_bar’).addClass(‘navbar-fixed’); } if ($(window).scrollTop() < 281) { $(‘#nav_bar’).removeClass(‘navbar-fixed’); } }); }); html, body { height: 4000px; } .navbar-fixed { top: 0; z-index: 100; position: fixed; width: … Read more
As Alohci noted, according to HTML5, example 3 is not allowed. But example 1 and 2 are not semantically equivalent. nav is a sectioning element, div not. So example 1 creates an untitled section (similar to an empty heading), changing the whole document outline. Also nav always belongs to its parent sectioning content (resp. sectioning … Read more
Note The accepted is perfectly fine – but wanted to add a version4 example because they are different enough. Nav.js import React from ‘react’; import { Link } from ‘react-router’; export default class Nav extends React.Component { render() { return ( <nav className=”Nav”> <div className=”Nav__container”> <Link to=”https://stackoverflow.com/” className=”Nav__brand”> <img src=”https://stackoverflow.com/questions/34607841/logo.svg” className=”Nav__logo” /> </Link> <div className=”Nav__right”> … Read more
You can supply your own class to the nav-pills container with your custom color for your active link, that way you can create as many colors as you like without modifying the bootstrap default colors in other sections of your page. Try this: Markup <ul class=”nav nav-pills red”> <li class=”active”><a href=”#tab1″ data-toggle=”tab”>Overview</a></li> <li><a href=”#tab2″ data-toggle=”tab”>Sample</a></li> … Read more
If you use the new 3.0.0. component router ( https://github.com/angular/vladivostok ) you can use the routerLinkActive directive. No further javascript required. <ul class=”nav navbar-nav”> <li [routerLinkActive]=”[‘active’]”> <a [routerLink]=”[‘one’]”>One</a></li> <li [routerLinkActive]=”[‘active’]”> <a [routerLink]=”[‘second’]”>Second</a></li> </ul> I used “@angular/router”: “^3.0.0-alpha.7”
nav is used for groups of internal links (a elements). Generally this means the links should travel to separate pages, or change content in the case of an AJAX page. Expect some sort of content change when clicking on a nav item. menu is used for groups of controls (a, input, button). Generally this means … Read more
the nav element and the list provide different semantical information: The nav element communicates that we’re dealing with a major navigation block The list communicates that the links inside this navigation block form a list of items At http://w3c.github.io/html/sections.html#the-nav-element you can see that a nav element could also contain prose. So yes, having a list … Read more
TL;DR: Create another <ul class=”navbar-nav ml-auto”> for the navbar items you want on the right. ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left. Tested against Bootstrap v4.5.2 <!DOCTYPE html> <html lang=”en”> <head> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”/> <style> /* Stackoverflow preview fix, please ignore */ .navbar-nav { flex-direction: row; … Read more