There are four variations of top bar:
Default (no extra class needed)
Screenshot
Topbar – Default color version
Classes:
— ct-topBar
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="ct-topBar text-center"> <div class="container"> <ul class="ct-panel--user list-inline text-uppercase pull-left"> <li><a href="#">login<i class="fa fa-lock"></i></a></li> <li><a href="#">sign up<i class="fa fa-user"></i></a></li> </ul> <div class="ct-widget--group pull-right"> <ul class="ct-widget--socials list-inline text-uppercase"> <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li><a href="http://www.createit.pl/"><i class="fa fa-wordpress"></i></a></li> </ul> <div class="btn-group"> <button type="button" class="btn btn-md dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <img src="assets/images/flags/png/england.png" alt="UK">English <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#"><img src="assets/images/flags/png/england.png" alt="UK">English</a></li> <li><a href="#"><img src="assets/images/flags/png/de.png" alt="GER">German</a></li> <li><a href="#"><img src="assets/images/flags/png/pl.png" alt="PL">Polish</a></li> </ul> </div> </div> <div class="clearfix"></div> </div> </div> |
Dark (ct-topBar–dark)
Screenshot
Topbar – Dark color version
Classes:
— ct-topBar
— ct-topBar–dark
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="ct-topBar ct-topBar--dark text-center"> <div class="container"> <ul class="ct-panel--user list-inline text-uppercase pull-left"> <li><a href="#">login<i class="fa fa-lock"></i></a></li> <li><a href="#">sign up<i class="fa fa-user"></i></a></li> </ul> <div class="ct-widget--group pull-right"> <ul class="ct-widget--socials list-inline text-uppercase"> <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li><a href="http://www.createit.pl/"><i class="fa fa-wordpress"></i></a></li> </ul> <div class="btn-group"> <button type="button" class="btn btn-md dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <img src="assets/images/flags/png/england.png" alt="UK">English <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#"><img src="assets/images/flags/png/england.png" alt="UK">English</a></li> <li><a href="#"><img src="assets/images/flags/png/de.png" alt="GER">German</a></li> <li><a href="#"><img src="assets/images/flags/png/pl.png" alt="PL">Polish</a></li> </ul> </div> </div> <div class="clearfix"></div> </div> </div> |
Motive (ct-topBar–motive)
Screenshot
Topbar – Motive color version
Classes:
— ct-topBar
— ct-topBar–motive
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="ct-topBar ct-topBar--motive text-center"> <div class="container"> <ul class="ct-panel--user list-inline text-uppercase pull-left"> <li><a href="#">login<i class="fa fa-lock"></i></a></li> <li><a href="#">sign up<i class="fa fa-user"></i></a></li> </ul> <div class="ct-widget--group pull-right"> <ul class="ct-widget--socials list-inline text-uppercase"> <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li><a href="http://www.createit.pl/"><i class="fa fa-wordpress"></i></a></li> </ul> <div class="btn-group"> <button type="button" class="btn btn-md dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <img src="assets/images/flags/png/england.png" alt="UK">English <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#"><img src="assets/images/flags/png/england.png" alt="UK">English</a></li> <li><a href="#"><img src="assets/images/flags/png/de.png" alt="GER">German</a></li> <li><a href="#"><img src="assets/images/flags/png/pl.png" alt="PL">Polish</a></li> </ul> </div> </div> <div class="clearfix"></div> </div> </div> |
Transparent (ct-topBar–transparent)
Screenshot
Topbar – Transparent color version
Classes:
— ct-topBar
— ct-topBar–transparent
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="ct-topBar ct-topBar--transparent text-center"> <div class="container"> <ul class="ct-panel--user list-inline text-uppercase pull-left"> <li><a href="#">login<i class="fa fa-lock"></i></a></li> <li><a href="#">sign up<i class="fa fa-user"></i></a></li> </ul> <div class="ct-widget--group pull-right"> <ul class="ct-widget--socials list-inline text-uppercase"> <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li><a href="http://www.createit.pl/"><i class="fa fa-wordpress"></i></a></li> </ul> <div class="btn-group"> <button type="button" class="btn btn-md dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <img src="assets/images/flags/png/england.png" alt="UK">English <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#"><img src="assets/images/flags/png/england.png" alt="UK">English</a></li> <li><a href="#"><img src="assets/images/flags/png/de.png" alt="GER">German</a></li> <li><a href="#"><img src="assets/images/flags/png/pl.png" alt="PL">Polish</a></li> </ul> </div> </div> <div class="clearfix"></div> </div> </div> |