Fist of all I am new to css/javascript/bootstrap.
All I want is to place this code:
<i class="fi-guide-dog"></i>
inside my span (or somewhere) so the dog icon shows next to the "Dog" word.
Please find my code below:
{%load static%}
<link rel="stylesheet" type="text/css" href="{% static 'toarnatot/style.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle= "collapse" data-target ="#topnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href={%url 'toarnatot:home'%}><strong>ToarnaTot</strong></a>
</div>
<!-- items -->
<div class="collapse navbar-collapse">
<ul class ="nav navbar-nav">
<li class="">
<a href="{% url 'toarnatot:home'%}">
<span class="glyphicon glyphicon-something" aria-hidden="true">
Dog
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Do not put anything inside the span tag , instead create another tag to print the text that you want to display with the glyphicon.
like:
<p>dog</p>
<span class="glyphicon glyphicon-something" aria-hidden="true"></span>
Related
Please exam the snippet in full page mode. The first navbar is fine. I tried to reduce the width of the search input but when I do that I can no longer get the links to move all the way to the right as in the first example. Can someone explain what's controlling the the width of the form and how do I adjust it to achieve the desired result
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Bootstrap Sandbox</title>
</head>
<body>
<nav class='navbar navbar-expand-md bg-primary navbar-light mb-3'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav2'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav2' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control " placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<nav class='navbar navbar-expand-md bg-primary navbar-light'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav3'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav3' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control w-50" placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
I think the width of the form is based on the combined width of the search button and the input-element(with its default width).
With w-50, the input's width is reduced to half of the form's width which in-turn is based on the default width of the input element.
So, instead of setting width:50%, if you can set the width to a fixed value like width:8em, you can achieve the expected results.
TYPO3 9.5.3 Fluid Bootstrap Package
How to make a mega menu in TypoScript with the placeholder I provide for example toplevel1 is the first then a dropdown toplevel2 and then a dropdown top-level 3? If you need the css I will upload it also and the JavaScript.
Thank you for you help. OR should I build the menu only with TypoScript?
Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="content-language" content="de-DE">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>HTL Villach</title>
<link rel="icon" type="image/png" href="images/logo_schwarz.png">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
</head>
<body>
<!-- NAVBAR -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="logo-link" href="index.html">
<img class="logo" width="190%" src="fileadmin/images/bannerlogo04.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" >
<img class="hamburger" src="images/menu.svg">
</button>
<!-- DESKTOP-DESIGN-AUSBILDUNG -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="desktop nav-link dropdown-toggle drop" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{menuPrimary f:format.raw()}<i class="fas fa-caret-down faicon"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row"><div class="desktop col-lg-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link-header" href="#">{toplevel2 f:format.raw()}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">{toplevel3 f:format.raw()}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- MOBILE-DESIGN AUSBILDUNG -->
<li class="mobile nav-item dropdown">
<a class="nav-link md dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle col-lg-3" href="#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item-sub" href="#">{toplevel3 f:format.raw()}</a></li>
</ul>
</ul>
</li>
<!-- DESKTOP-DESIGN-SCHULE -->
<li class="nav-item dropdown">
<a class="desktop nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row">
<div class="desktop col-lg-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link-header" href="#">{toplevel2 f:format.raw()}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">{toplevel3 f:format.raw()}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- MOBILE-DESIGN SCHULE -->
<li class="mobile nav-item dropdown">
<a class="nav-link md dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle col-lg-3" href="#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item-sub" href="#">{toplevel3 f:format.raw()}</a></li>
</ul>
</li>
</ul>
</li>
<!-- DESKTOP-DESIGN-LEHRER -->
<li class="nav-item dropdown">
<a class="desktop nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row">
<div class="desktop col-lg-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link-header" href="#">{toplevel2 f:format.raw()}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">{toplevel3 f:format.raw()}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- MOBILE-DESIGN LEHRER -->
<li class="mobile nav-item dropdown">
<a class="nav-link md dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle col-lg-3" href="#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item-sub" href="#">{toplevel3 f:format.raw()}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- SUCHE -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control" type="search" placeholder="Suche" aria-label="Search">
<a id="search" href="index.html"><i class="fas fa-search"></i></a>
</form>
</div>
</nav>
</header>
<!-- FOOTER -->
<div class="footer">
<span class="copyright">©</span>
<span class="mr-2">Höhere technische Bundeslehr- und Versuchsanstalt Villach, Tschinowitscher Weg 5, 9500 Villach</span>
<span class="vertical-line">|</span>
<span>Tel: +43 4242 37061-0</span>
<span class="vertical-line">|</span>
Kontakt
<span class="vertical-line">|</span>
Impressum
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/nav.js"></script>
</body>
</html>
#Björn: Especially for megamenus, use of TS will offer you many possibilities of individual, partial caching. So it's a choice between performance and maintainability.
I prepared simple navbar menu with BS 4 documents. The toggle menu displays vertical when I clicked. Is it possible make horizontal with BS?
This is my navbar and codepen.io: vertical toggle
body {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
<img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">ABOUT<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link " href="#">PORTFOLIO</a>
<a class="nav-item nav-link " href="#">CONTACT</a>
</div>
</div>
</nav>
This is as I want but I couldn't figured out with source code: horizontal toggle
It's fairly simple to do that. Bootstrap has flex class options, so there's no need to create your own code.
Simply change:
<div class="navbar-nav ml-auto">
To:
<div class="navbar-nav flex-row ml-md-auto d-md-flex">
Also make sure to add p-2 to your nav-item that will give you some padding space between the elements.
That makes your code look like this:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
<img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav flex-row ml-md-auto d-md-flex">
<a class="nav-item nav-link p-2 active" href="#">ABOUT<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link p-2" href="#">PORTFOLIO</a>
<a class="nav-item nav-link p-2" href="#">CONTACT</a>
</div>
</div>
</nav>
I have the following list inside an ion-content:
<ul class="list">
<li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
<div class="dr-info-wrapper">
<img src="img/icons/ic_persona.png">
<section class="dr-info">
<h3>{{doctor.name}}</h3>
<h4 class="institution">{{doctor.institutions[0].name}}</h4>
<h4 class="address">{{doctor.institutions[0].address}}</h4>
<h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
</section>
<span class="ion-ios-information-outline info-icon"></span>
</div>
</li>
</ul>
I just need that list to scroll because I have other elements inside the same which I need them to be static/fixed (with no scroll). This is how the view looks right now:
The red part must not move/no-scroll the blue part is the part I want with scroll, thanks for any help!
The code for the complete html just in case is:
<ion-view id="doctors" view-title="Directorio médico" ng-controller="DoctorsDirController">
<ion-content class="content-dir-medico" scroll="false">
<div class="top-wrapper">
<section class="section-for-bg-img"></section>
<div class="dir-medico-grid-bg-img"></div>
<section ng-class="blurOptionsWrapper ? 'options-wrapper-blurred' : 'options-wrapper'">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CITIES FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="all-suboption">
<div class="description-and-dropdown-wrapper first">
<h4 ng-class="cityClicked ? 'mark-used' : 'mark-unused'">{{cityName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down" ng-disabled="blurOptionsWrapper"
ng-click="citiesPopover.show($event)">
<script id="popoverCities.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="city in cities | orderBy: 'id'" ng-click="cityClick(city)">
{{city.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
SPECIALTIES FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper">
<h4 ng-class="specialtyClicked ? 'mark-used' : 'mark-unused'">{{specialtyName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down"
ng-disabled="disableSpecialty || blurOptionsWrapper"
ng-click="specialtiesPopover.show($event)">
<script id="popoverSpecialties.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="specialty in specialties | orderBy: 'label'"
ng-click="specialtyClick(specialty)">
{{specialty.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
INSTITUTIONS FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-class="disableInstitutions ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper last">
<h4 ng-class="institutionClicked ? 'mark-used' : 'mark-unused'">{{institutionName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down"
ng-disabled="disableInstitutions || blurOptionsWrapper"
ng-click="institutionsPopover.show($event)">
<script id="popoverInstitutions.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="institution in institutions | orderBy: 'name' | unique: 'name'"
ng-click="institutionClick(institution)">
{{institution.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
</section>
</div>
<section class="search-instructions" ng-hide="hideSearchInstructions">
<img src="img/icons/ic_lupaesfera.png" class="search-icon">
<h4>Comienza buscando </br>por ciudad y especialidad</h4>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
RESULTS SHOW ALL DOCTORS, BASED ON CITY & SPECIALTY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<section class="results-area" ng-hide="hideDoctorsResults">
<div class="filter-results-info">
<h5>{{doctors.length}} resultados</h5>
<h6>Filtra resultados seleccionando una institución</h6>
</div>
<ul class="list">
<li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
<div class="dr-info-wrapper">
<img src="img/icons/ic_persona.png">
<section class="dr-info">
<h3>{{doctor.name}}</h3>
<h4 class="institution">{{doctor.institutions[0].name}}</h4>
<h4 class="address">{{doctor.institutions[0].address}}</h4>
<h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
</section>
<span class="ion-ios-information-outline info-icon"></span>
</div>
</li>
</ul>
</section>
I just used another ion-content covering the <ul class="list">and it solved my problem
I am using angular-strap to create a navbar. It collapses down to the hamburger icon just like it should, but when it is collapsed (hamburger icon) it will not expand to click on a link. Here is my code:
<nav class="navbar navbar-default" role="navigation" bs-navbar>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
The navbar is responsive like expected. Also, the directive is being instantiated, because the breakpoint in the link function gets hit. As explained above when the navbar is in it's hamburger state, it won't expand to make it able to click on any of the links. What else do I need to look at to make this work with angular-strap? How do I make the hamburger icon expand?
You can make use of the collapse directive in ng-strap 2.1.3.
This was added very recently.
An example:
<nav class="navbar navbar-default" bs-collapse>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" bs-collapse-toggle>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-bind="config.options.page.pageName" ui-sref="root">Doks</a>
</div>
<div bs-collapse-target>
<ul class="nav navbar-nav">
<li ng-repeat="category in categories" class="item" ng-class="{active: urlParams.category === category}">
<a ui-sref="hasCategory({category: category})">{{category}}</a>
</li>
</ul>
</div>
</div>
</nav>