Skip to content

Instantly share code, notes, and snippets.

@Ahnita Ahnita/navbar.css
Last active Aug 29, 2015

Embed
What would you like to do?
Navbar
/* Nav Bar */
nav li ul {
float: right;
width: 100%;
position: fixed;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
z-index: 6;
display: inline-block;
padding: 20px 10px 20px;
}
.projectname a img {
float: none;
padding: 5px;
position: fixed;
z-index: 6;
}
li a {
transition: color 600ms;
font: 20px 'josefin sans', serif;
}
ul.nav a:hover {
color: #D42163 !important;
}
nav {
float: right;
z-index: 6;
}
<body data-spy = "scroll" data-target=".navbar">
<body class="flex-center-wrapper flex-column">
<!-- navbar starts here -->
<nav class = "navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class = "projectname">
<a href ="#"><img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
</a>
</div> <!-- end of projectName -->
<nav class="container-fluid">
<nav class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href= "#about">About</a></li>
<li><a href= "#projects">Projects</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- end of navbar-collapse collapse -->
</nav> <!-- End of navbar-header -->
</nav> <!-- end f nav container -->
</nav> <!-- end of navbar -->
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.