CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3navbar
Inyoka
Inyoka

Reputation: 1446

Add iconified links to a minimised twitter bootstrap navbar

I am using a stock navbar from getbootstrap.com, I would like to put iconified links on a 'collapsed' navbar. The only way I have found is to use the "navbar-brand" class attribute like so ...

<a class="navbar-brand" href="#link1">My Brand</a>
<a class="navbar-brand" href="#link2"><span class="glyphicon glyphicon-home" aria-hidden="true"></a>
<a class="navbar-brand" href="#link3"><span class="glyphicon glyphicon-user" aria-hidden="true"></a>

resulting in this :

Screenshot of collapsed navbar with icon's

1) Is there a specific class attribute for 'non-branded links, as I assume this method would have repercussions for visitors using assistive technology. I tried 'navbar-btn' and a regular 'button', but neither line up vertically, or look nice.

2) I would like to hide these iconified links when using the app on a laptop (if possible). ie. use icons on mobile, menus on desktop.

This will be for a CRUD application with limited functionality, and the drop down menu is cumbersome on a phone.

Upvotes: 0

Views: 59

Answers (1)

neophyte
neophyte

Reputation: 6626

Answer 1

Yes bootstrap has class attribute for 'non-branded links it is class="navbar-text".

Answer 2

Use bootstrap hidden-lg to hide these links on desktop app.

Working example

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          </head>
          <body>

    <a class="navbar-brand" href="#link1">My Brand</a>
<a class="navbar-text hidden-lg hidden-md hidden-sm" href="#link2"><span class="glyphicon glyphicon-home" aria-hidden="true"></a>
<a class="navbar-text hidden-lg hidden-md hidden-sm" href="#link3"><span class="glyphicon glyphicon-user" aria-hidden="true"></a>
  </body>
  </html>

Upvotes: 1

Related Questions