Questions tagged [nav]

The `

The <nav> tag is new HTML5 tag which defines a section of navigation links.

<nav>
   <ul>
      <li><a href="/html/">HTML</a></li>
      <li><a href="/css/">CSS</a></li>
      <li><a href="/js/">JavaScript</a></li>
      <li><a href="/jquery/">jQuery</a></li>
   </ul>
</nav>

In the HTML5 specification its primary use case is defined as follows:

The element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

For more information on usage see HTML5 Doctor or the w3.org HTML reference.

2532 questions
258
votes
8 answers

Align nav-items to right side in bootstrap-4

I just switched to bootstrap 4 and reworking all my html and scss to work with it and I cant seem to find how to put a group of nav-items on the right side of the navbar. This is my navbar code:
144
votes
9 answers

Should I use

Now that we have a dedicated
kikito
  • 51,734
  • 32
  • 149
  • 189
108
votes
5 answers

W3Schools.com and I'm pretty sure I remember seeing W3C.org state that should be used for Toolbar menus and listing form control commands. So, which one should I use for my main menu? Nav, or Menu? Does it matter?
anon271334
79
votes
11 answers

How to set Bootstrap navbar "active" class in Angular 2?

How can I set Bootstrap navbar "active" class in Angular 2? I only found Angular 1 way. When I go to About page, add class="active" to About, and remove class="active" on Home.
74
votes
15 answers

Changing color of Twitter bootstrap Nav-Pills

I'm trying to change the active color (after its clicked it remains twitter's light-blue color) for each tab:
73
votes
4 answers

React router nav bar example

I am a beginner in React JS and would like to develop a react router based navigation for my Dashboard. The mockup is as follows: My app.js code which I created to try routing is as follows: import React from 'react' import { render } from…
cucucool
  • 3,777
  • 8
  • 48
  • 63
53
votes
6 answers

HTML5 nav element vs. role="navigation"

Do all of the following carry the same semantic meaning? If not please explain your answer. 1.
Web_Designer
  • 72,308
  • 93
  • 206
  • 262
47
votes
11 answers

Make a nav bar stick

Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar…
user2885415
41
votes
10 answers

How to create a sticky navigation bar that becomes fixed to the top after scrolling

I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this…
Brian
  • 2,687
  • 9
  • 37
  • 39
32
votes
3 answers
27
votes
12 answers

I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?

I'm new on bulma css http://bulma.io/ I'm trying to use hamburger menu for mobile user. I just followed instruction on this page: http://bulma.io/documentation/components/nav/ But it doesn't work. What should I add ? Actually, I can see hamburger…
moge
  • 273
  • 1
  • 3
  • 6
23
votes
4 answers

preventing

I'm trying to implement correct sectioning with html5 sectioning elements and headlines while achieving the design/layout, my customer has requested (including certain restrictions). The general layout will be something like this:
All Bits Equal
  • 731
  • 2
  • 10
  • 26
23
votes
4 answers

HTML5 nav element inside footer

I've read in several places that there's no need to use
Steve Taylor
  • 1,871
  • 4
  • 16
  • 18
19
votes
3 answers

Angular UI Bootstrap responsive Navbar dropdown not working properly in new version

I just created an AngularJS project with grunt bower and Yeoman. Included Updated version to Angular 1.3.13. I want to use Angular UI bootstrap. I added Nav Bar which is responsive. But while on small screens, the drop down doesn't seem to work.…
iCode
  • 8,892
  • 21
  • 57
  • 91
17
votes
1 answer

Taking up space after display none

When I apply display: none; for #nav-icon element, it still takes up space. Here is my code: HTML
1
2 3
99 100