<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header id="page-home" class="site-header">
<div class="container">
<nav class="family-sans text-uppercase navbar navbar-expand-md py-0 py-md-0">
<a class="navbar-brand" href="#page-home">
<img class="mt-1" src="images/logo.png" alt="Company Name" width="169" height="41">
<p class="site-description">Slogan</p>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class=""><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto text-uppercase nav-item">
<li class="nav-item active"><a class="nav-link" href="#page-hero">home</a></li>
<li class="nav-item"><a class="nav-link" href="#page-multicolumn">about</a></li>
<li class="nav-item"><a class="nav-link" href="#page-media">services</a></li>
<li class="nav-item"><a class="nav-link" href="#page-photogrid">clients</a></li>
<li class="nav-item"><a class="nav-link" href="#page-carousel">blog</a></li>
<li class="nav-item"><a class="nav-link" href="#page-nested">contact</a></li>
</ul>
</div>
</nav>
</div>
</header>
/* Load fonts */
@import url('https://fonts.googleapis.com/css?family=Merriweather:300|Source+Sans+Pro:200,400,600');
/* Variables */
:root {
/*
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
*/
/* Override Variables */
--font-family-sans-serif: 'Source Sans Pro', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-family-serif: Merriweather, serif;
--primary: #084595;
--light: #cdd9e9;
--light-blue: #e6ecf4;
--brown: #955808;
--color-text: var(--primary);
--color-light: var(--light);
--font-family-text: var(--font-family-serif);
}
.family-sans {
font-family: var(--font-family-sans-serif);
}
body {
font-family: var(--font-family-text);
color: var(--color-text);
font-weight: 200;
}
.site-header {
background-color: var(--light-blue);
-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
}
p.site-description {
font-size: .6em;
font-weight: 400;
color: var(--brown);
}
.nav-item a {
font-weight: 400;
font-size: 1.1em;
color: var(--primary);
}
