Header Navigation

In this example below you will see how to do a Header Navigation with some HTML / CSS and Javascript

This awesome code was written by bestw01, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bestw01 ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Header Navigation</title>
      <link rel="stylesheet" href="css/style.css">



  <html lang="en">

  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body id="main">
  <!--navigation line-->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <nav class="navbar-header">
        <a href="#" class="navbar-brand">Mentor Concepts</a>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">My Polfolio</a></li>
        <li><a href="#">Contact Me</a></li>
  <!--End of navigation line-->

    <h3>The name is Kingsley and I'm an UX/UI designeveloper, with extensive practical experience in brand strategy, creative direction and project management; devoted to Functional Programming and Information Architecture. Also a huge fan of semantics and futuristic interfaces.</h3>



/*Downloaded from https://www.codeseek.co/bestw01/header-navigation-NNvMdx */
 navbar {
    font: 400 15px/1.8 Lato, sans-serif;
    color: #777;
    background-color: #055006;

.btn {
      padding: 10px 20px;
      background-color: green;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
.navbar {
  font-family: Montserrat, sans-serif;
  margin-bottom: 0;
  background-color: #2d2d30;
  border: 0;
  font-size: 18px !important;
  letter-spacing: 4px;