Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML :
- <div class="floating-nav">
- <nav class="navbar navbar-default">
- <div class="container-fluid">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="floating-nav-icon navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
- <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 header-shrink-logo" href="">
- <!-- <img class="logo-small-device" src="<?php echo get_template_directory_uri(); ?>/assets/img/logo/shrink-logo.svg" alt=""> -->
- <?php echo file_get_contents(get_template_directory_uri().'/assets/img/logo/shrink-logo.svg'); ?>
- </a>
- </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav pull-right">
- <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Who We Are <span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Our Services</a></li>
- <li><a href="#">Our Story</a></li>
- <li><a href="#">Our Team</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Work <span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Our Portfolio</a></li>
- <li><a href="#">Our Case Studies</a></li>
- <li><a href="#">Our Clients</a></li>
- </ul>
- </li>
- <li><a href="#">Blog</a></li>
- <li><a href="#">Join Our Team</a></li>
- <li class="get-in-touch"><a href="#">Get In Touch</a></li>
- </ul>
- </div><!-- /.navbar-collapse -->
- </div><!-- /.container-fluid -->
- </nav>
- </div>
- SCSS:
- //Style for the floating nav
- .floating-nav-icon {
- display: none;
- }
- .floating-nav {
- .header-shrink-logo {
- svg {
- width: 40px;
- height: auto;
- position: relative;
- bottom: 10px;
- left: 9px;
- }
- }
- .navbar-default {
- background-color: white;
- .navbar-nav {
- margin-right: 62px;
- .active a {
- background-color: white;
- border-bottom: 2px solid $boomerang-orange;
- }
- ul.dropdown-menu {
- background-color: white;
- box-shadow: 0 0 3px 0 rgba(0,0,0,.2);
- li {
- a {
- border-bottom: 0px;
- &:hover {
- background-color: #fafafa;
- }
- }
- }
- }
- }
- .floating-nav-icon {
- background-color: #ddd;
- }
- }
- .navbar {
- box-shadow: 0 0 3px 0 rgba(0,0,0,.2);
- .nav {
- li {
- a {
- padding: 25px 0 18px;
- margin-right: 65px;
- color: #777;
- @extend .transition;
- &:hover {
- color: #212121;
- }
- }
- }
- li.dropdown {
- &:focus, &:active {
- outline: 0;
- box-shadow: none;
- }
- a {
- color: #777;
- &:hover {
- color: #212121;
- }
- &:hover {
- background-color: white;;
- }
- &:focus {
- outline: 0;
- box-shadow: none;
- }
- }
- &.open {
- color: #212121;
- }
- }
- li.get-in-touch {
- position: relative;
- height: 100%;
- margin-top: 3px;
- a {
- margin: 0px;
- padding: 9px 23px;
- position: relative;
- top: 10px;
- border: 1px solid rgba(0,0,0,.5);
- color: #010101;
- border-radius: 2px;
- &:hover{
- background-color: $boomerang-dark-gray;
- color: white;
- }
- }
- &.active a {
- background-color: $boomerang-dark-gray;
- color: white;
- }
- }
- }
- }
- @media only screen and (max-width : 992px) {
- .floating-nav-icon {
- display: block;
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement