Develop Reference

Move a menu with the entire page

I would like to know how to make menu button fixed at page top. I need it to be available whenever page scroll down or up. On click; menu should slide down. Thank you to everyone who will answer and sorry for my bad english. PS Even if in this platform the menu is not shown well, in my website it works fine, just is stuck only on the top left corner and doesn't move with the page
$(document).ready(function() {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle("slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle("slow", function() {
$(".cross").hide();
$(".hamburger").show();
});
});
});
header {
width: 100%;
background: #ffffff;
height: 0px;
line-height: 0px;
border-bottom: 0px solid #dddddd;
}
.hamburger {
background: none;
position: absolute;
top: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: #ffffff;
border: 0;
font-size: 2.0em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
padding: 5px 15px 0px 15px;
color: #ffffffff;
border: 0;
font-size: 4em;
line-height: 55px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: max(20%, max-content);
background: #666;
position: absolute;
text-align: center;
font-size: 10px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
}
.menu li:hover {
display: block;
background: #666;
padding: 15px 0 15px 0;
border-bottom: #666 10px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
color: #111;
text-align: center
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
text-align: center;
}
.menu a:hover {
text-decoration: none;
color: black;
text-transform: uppercase;
letter-spacing: 5px;
text-transform: uppercase;
font: 15px "Lato", sans-serif;
text-align: center
}
.glyphicon-home {
color: black;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
<header>
<button class="hamburger">☰</button>
<div class="menu">
<ul>
<li><button class="cross">˟</button></li>
<a href="#g1">
<li>Link 1</li>
</a>
<a href="#g2">
<li>link 2</li>
</a>
<a href="#g3">
<li>link 3</li>
</a>
<a href="#g3">
<li>link4</li>
</a>
</ul>
</div>
</header>

Your code need to rebuild. You have a lot of code with no need. HTML Structure is not correct.
As #eric mentioned. you should use fixed position.
I made some changes to your code. Check it out at:
header {
background: red;
height: 1000px;
}
.menu {
position: fixed;
top: 10px;
left: 10px;
z-index: 999999;
}
.menu button {
width: 100%;
border: none;
border-radius: 0;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
cursor: pointer;
padding: 5px 15px;
}
.menu button:hover {
background: #fff;
color: black;
}
.menu ul {
font-weight: bold;
font-size: 0.8em;
background: rgba(0,0,0,.5);
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.menu ul li a {
display: block;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
color: white;
text-decoration: none;
padding: 15px 5px;
}
.menu ul li a:hover {
background: white;
color: black;
text-decoration: none;
}
https://codepen.io/anon/pen/pKyNEJ

You need to fix its position.
position: fixed;

dropdown is getting messed up in the menu header

I am working on making menu header for my webpage. Here is my jsfiddle.
In my menu header, my dropdown is not working properly on INSURANCE text. Once you click it, you will see what I meant. I am not able to figure out what's wrong. And I believe it is mainly happening because of height and overflow on .topnav but not sure what is the best way to fix it?
Here is my HTML and CSS:
#font-face {
font-family: AvantGarde Demi;
src: url(AvantGarde Demi.woff);
}
#font-face {
font-family: AvantGarde;
src: url(AvantGarde.woff);
}
#font-face {
font-family: ITC Avant Garde Gothic;
src: url(ITC Avant Garde Gothic.woff);
}
/******************For Top Nav****************************/
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a {
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul {
display: none;
margin-top: 30px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li {
float: left;
clear: left;
display: block;
text-align: left;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
padding-left: 150px;
top: -430px;
left: -160px;
}
.header h1 {
padding-left: 110px;
color: white;
font-family: AvantGarde;
text-align: center;
font-size: 35px;
left: -420px;
letter-spacing: .24em;
position: relative;
top: -615px;
font-family: "AvantGarde";
text-transform: uppercase;
}
.header p {
padding-left: 290px;
text-align: center;
padding-right: 210px;
font-size: 22px;
letter-spacing: .12em;
font-family: "Adelle PE";
color: white;
position: relative;
top: -700px;
}
.header h2 {
font-family: "Adelle PE";
font-style: italic;
text-transform: uppercase;
top: -490px;
font-weight: normal;
font-size: 21px;
position: relative;
margin-left: 630px;
color: white;
letter-spacing: 0.24em;
}
.header a {
color: white;
text-decoration: none;
}
#worldofnorthman {
background-size: cover;
background-image: url("our_story.png");
/*width: 404px;*/
height: 768px !important;
}
.login {
display: inline;
padding-left: 15px;
letter-spacing: .25em;
color: white;
font-size: 11.433px;
font-family: AvantGarde;
}
.login a {
color: white;
text-decoration: none;
}
.login a:hover {
color: #fe5b1f;
text-decoration: none;
}
.container {
width: 100% !important;
}
li.insurance {
padding-top: 30px !important;
}
li.our-story {
padding-top: 30px !important;
}
li.login-signup {
padding-top: 30px !important;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.our-story {
margin-right: 200px !important;
font-family: AvantGarde;
letter-spacing: .30em;
color: white;
}
li.login-signup {
font-style: italic;
font-size: 12px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered:hover {
background-color: #EF7440;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
<div class="header"> <img class="header-background" src="https://s30.postimg.org/3q4ox3s81/background-image-chrisdavenport.png">
<div class="orange-bar">
<img class="orange-bar-image" src="https://s9.postimg.org/sdrolfjan/orange-bar.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s2.postimg.org/nhr4xxqcp/northman_wordmark_CMYK.png">
</li>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
</li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
</div>
Any thoughts what I did wrong? Also I want to align everything in menu header in one line and my dropdown should start from the border of that orange line.

You used overflow hidden in navigation div which caused the problem. Here's the jsfiddle
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px solid #EF7440;
/*overflow: hidden;*/
}

Scroll Nav in Wordpress not working

I want to create a 'scroll-nav' for my website. So I separated 2 Navs and added some jquery:
<nav class="main-nav clearfix">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
<nav id="scroll-nav" style="display:none">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
But it´s not working. Do I have to do something different because of WordPress? It tested it in a normal html, it works fine there.

You are putting clearfix like ID when you have to do it in class attribute.
<nav id="scroll-nav" class="clearfix" style="display:none">
And put your
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
into
$(document).ready(function(){
});

#import url(http://fonts.googleapis.com/css?family=Pacifico|Roboto:400,500);
nav {
background: #333;
overflow: auto;
padding: 60px;
position: relative;
z-index: 2;
}
ul {
text-align: center;
float: right;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
display: block;
padding: 5px 10px;
margin: 0 10px;
color: #eee;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 32px;
font-weight: bold;
transition: all 200ms linear;
}
nav a:hover,
nav#small a:hover {
color: #C18055;
background: #fff;
}
nav#small {
background: #fff;
padding: 20px 40px;
position: fixed;
box-sizing: border-box;
width: 100%;
top: 0;
z-index: 1;
box-shadow: 0px 2px 2px #fff;
}
nav#small h1,
nav#small a {
color: #333;
}
nav#small h1 {
font-size: 38px;
}
nav#small h1>a {
color: #C18055;
}
nav#small h1>a:hover {
color: #3ab4a6;
}
div#content {
height: 2200px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/03/95/6f/03956fed74537b3d7b0858e9a814748d.jpg')repeat 0 0;
opacity: 0.9;
}
div#content h2 {
color: #fff;
font-weight: bold;
transform: rotate(-10deg);
line-height: 60px;
font-size: 48px;
text-transform: uppercase;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
width: 10%;
bottom: 10%;
text-shadow: 2px 2px 2px #333;
font-family: 'Pacifico', cursive;
}
div#content h2:before {
display: inline-block;
background: url('http://www.menoftheras.com/wp-content/gallery/test/arrow.png')no-repeat 0 0;
background-size: cover;
width: 239px;
height: 200px;
content: "";
transform: rotate(-80deg);
margin-bottom: 40px;
}
#media (max-width: 700px) {
nav {
padding: 20px;
}
nav h1 {
display: block;
float: none;
text-align: center;
padding: 20px;
}
nav ul {
float: none;
padding: 20px;
}
div#content h2 {
width: 30%;
}
nav#small {
padding: 20px;
}
nav#small ul {
padding: 5px;
}
nav#small h1 {
padding: 10px;
font-size: 28px;
margin-bottom: 5px;
}
nav#small a {
font-weight: normal;
}
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<nav id="small">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="content">
<h2>Scroll!</h2>
</div>
Would you please check my above snippet?

(De-)activating navbar items in Bootstrap

I'm trying to change the background colour of a navbar item upon click by setting it active. The menu item corresponding to the left page should be deactivated, i.e. its background colour should be set back to normal.
There are two problems:
When using data-toggle="pill", the href does not work anymore (therefore I left it out)
Remembering the previous page is not working because the global variable previousID is not overwritten. As a consequence, the previously selected menu item is not deactivated.
Here's the code:
var previousID = "navbar-index";
$("li").click(function() {
var currentID = $(this).attr("id");
alert("current ID: " + currentID);
document.getElementById(currentID).setAttribute('class', 'active');
alert("previous ID: " + previousID);
document.getElementById(previousID).removeAttribute('class', 'active');
previousID = currentID;
});
/*.dropdown:hover .dropdown-menu {
display: block;
}*/
h4,
h5,
h6,
h1,
h2,
h3 {
margin-top: 0;
}
ul,
ol {
margin: 0;
}
p {
margin: 0;
font-weight: 300;
}
html,
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
background-color: #FFF;
color: #777;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.header {
background: #fff;
padding: 2em 0;
border-top: 3px solid #2ABB9B;
border-bottom: 3px solid #2ABB9B;
}
.navbar-brand {
font-size: 32px;
font-weight: 700;
color: #444;
letter-spacing: -1px;
padding: 5px;
}
.navbar-brand:hover {
color: #3e897a;
}
.navbar-brand .fa {
color: #2abb9b;
}
.menu {
float: right;
}
.menu li {
display: inline-block;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
display: block;
font-size: 1em;
color: #777;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
}
#nav .current a {
color: #2ABB9B;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu li a:hover {
/*color: #94ddcd;*/
color: #104a3e;
/*background: #fff !important;*/
background: #a9e3d7 !important;
}
.menu li.active a {
color: #000000;
/*background: #fff !important;*/
background: #ff0000 !important;
}
.toggleMenu {
display: none;
padding: 4px 5px 0px 5px;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-o-border-radius: 2em;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
}
#media screen and (max-width: 800px) {
.menu {
margin: 10px 0;
}
.active {
display: block;
}
.menu li a {
text-align: left;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.nav {
list-style: none;
*zoom: 1;
width: 95%;
position: absolute;
right: 10px;
background: #051619;
top: 86px;
z-index: 9999;
border: 1px solid #B11D1D;
}
.menu li a span {
text-align: center;
top: 15px;
}
.nav li ul {
width: 100%;
}
.menu ul {
margin: 0;
}
.nav > li.hover > ul {
width: 100%;
}
.nav > li {
float: none;
display: block;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul,
.nav li li.hover ul {
position: static;
}
.nav li a {
border-top: 1px solid #B11D1D;
background: #fff;
}
.nav li:first-child a {
border-top: none;
}
}
.banner {
background: url(../images/banner.jpg) no-repeat center;
min-height: 500px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 100px;
}
.banner-info {
margin-top: 8em;
}
.banner-info h1 {
font-size: 3em;
color: #eee;
line-height: 1.4em;
margin: 0em;
font-weight: 500;
}
.banner-info p {
color: #ddd;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.8em;
margin-top: 1em;
}
.content_white {
text-align: center;
padding: 3em 0;
}
.content_white h2 {
font-size: 2em;
font-weight: 500;
}
.content_white p {
color: #777;
font-size: 1.2em;
font-weight: 300;
line-height: 0.6em;
}
.featured_content {
background: #2ABB9B;
}
.feature_grid1 {
width: 23.5%;
margin-right: 2em;
border-right: 1px solid #5fccb4;
padding: 4em 2em 4em 0;
}
.feature_grid2 {
width: 21%;
padding: 4em 0;
}
.feature_grid1 .fa,
.feature_grid2 .fa {
color: #e5e52d;
}
h3.m_1 {
padding: 0.8em 0;
margin: 0;
}
h3.m_1 a {
font-size: 1.1em;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px #4ca390;
}
h3.m_1 a:hover {
color: #e5e52d;
}
p.m_2 {
color: #e9f8f5;
font-size: 1em;
line-height: 1.5em;
margin-bottom: 1em;
font-weight: 300;
}
.banner_btn {
display: inline-block;
padding: 6px 20px;
font-size: 1em;
cursor: pointer;
background: #2ABB9B;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
margin-top: 30px;
border-radius: 5px;
}
.banner_btn:hover {
background: #22967c;
color: #fff;
text-decoration: none;
}
.feature_btn {
display: inline-block;
padding: 6px 20px;
font-size: 1em;
cursor: pointer;
background: #5fccb4;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
margin-top: 10px;
border-radius: 5px;
}
.feature_btn:hover {
background: #e5e52d;
color: #555;
text-decoration: none;
}
.nbs-flexisel-container {
position: relative;
max-width: 100%;
}
.nbs-flexisel-ul {
position: relative;
width: 9999px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
.nbs-flexisel-inner {
overflow: hidden;
margin: 3em 0;
}
.nbs-flexisel-item {
float: left;
margin: 0px;
padding: 0px;
cursor: pointer;
position: relative;
line-height: 0px;
padding-right: 30px;
}
.nbs-flexisel-item > img {
cursor: pointer;
position: relative;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
width: 30px;
height: 30px;
position: absolute;
cursor: pointer;
z-index: 100;
margin-top: -8.6em;
}
.nbs-flexisel-nav-left {
left: 32.5em;
background: url(../images/img-sprite.png) no-repeat -99px -101px;
}
.nbs-flexisel-nav-right {
right: 35em;
background: url(../images/img-sprite.png) no-repeat -133px -102px;
}
a:focus {
outline: 0px;
}
.fa {
color: #2ABB9B;
}
.footer_bottom {
padding: 2em 0;
background: #2ABB9B;
}
.copy {
text-align: center;
}
.copy p {
font-size: 1em;
color: #fff;
}
.copy p a {
color: #fff;
border-bottom: 1px dotted;
}
.copy p a:hover {
color: #e5e52d;
border-bottom: 1px solid;
text-decoration: none;
}
.about {
background: #555;
margin-bottom: 4em;
background: url(../images/title-bg.jpg) center no-repeat;
background-size: cover;
height: 180px;
}
.title-section {
position: relative;
padding-top: 60px;
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
}
.title-section h1 {
margin: 0 0 5px 0;
line-height: 58px;
font-size: 34px;
font-weight: 500;
color: #555;
}
.title-section ul {
background: none;
position: relative;
margin: 0;
padding: 9px 0 10px 0;
border-top: 1px solid #597275;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.title-section ul li {
line-height: 18px;
font-size: 13px;
color: #5f6775;
}
.title-section ul li a {
color: #fff;
}
h3.m_2 {
font-size: 1.7em;
font-weight: 500;
color: #666;
margin-bottom: 1em;
}
.service_box {
padding-bottom: 50px;
}
.service_box .fa {
color: #2ABB9B;
}
.service_box h2 {
font-size: 1.6em;
color: #5d5f60;
padding-top: 0.3em;
padding-right: 0;
padding-left: 0;
padding-bottom: 0.5em;
}
.service_box h5 a {
font-size: 16px;
color: #555;
margin-bottom: 1em;
line-height: 1.5em;
}
.service_box h5 a:hover {
text-decoration: none;
color: #e4551d;
}
.service_box p {
font-size: 1em;
color: #777;
margin-bottom: 1.4em;
line-height: 1.6em;
text-align: left;
}
.about-info {
padding: 4em 0;
}
.about-info h2 {
padding-bottom: 20px;
}
.about-info h3,
.about_content h3 {
padding-bottom: 20px;
}
.about_content {
padding: 1em 0 4em 0;
}
.about_content img {
padding: 0 20px 20px 0;
float: left;
}
.highlight-info {
background: url(../images/lab.jpg) center fixed;
background-size: cover;
color: #fff;
padding: 6em 0;
}
.highlight-info h4 {
color: #fff;
margin: 0.5em 0 0 0;
}
.testimonial-solid {
padding-top: 50px;
padding-right: 0;
padding-left: 0;
padding-bottom: 70px;
margin: 0 0 0 0;
background: #fff;
text-align: center;
}
.carousel-indicators {
bottom: -40px;
}
.carousel-indicators li {
border: 1px solid #ccc;
}
.carousel-indicators .active {
background-color: #ccc;
margin-right: 4px;
}
.testimonial-solid h2 {
font-size: 2em;
font-weight: 500;
padding-bottom: 20px;
}
.testimonial-solid p {
font-size: 1em;
line-height: 30px;
}
#accordion-alt3 .panel-heading h4 {
font-size: 14px;
line-height: 28px;
}
.panel .panel-heading h4 {
font-weight: 400;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 15px;
color: inherit;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 2px;
}
.panel {
margin-bottom: 18px;
background-color: #F4F4F4;
border: 1px solid transparent;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
#accordion-alt3 .panel-heading h4 a i {
font-size: 16px;
line-height: 18px;
width: 18px;
height: 18px;
margin-right: 5px;
color: #2ABB9B;
text-align: center;
border-radius: 50%;
margin-left: 6px;
}
.follow-us {
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
}
.social-icon {
padding-top: 6px;
font-size: 16px;
text-align: center;
width: 32px;
height: 32px;
border: 2px solid #d5f1eb;
border-radius: 50%;
color: #d5f1eb;
margin: 5px;
}
a.social-icon:hover,
a.social-icon:active,
a.social-icon:focus {
text-decoration: none;
color: #e5e52d;
border-color: #e5e52d;
}
.contact {
padding-top: 1em;
padding-right: 0;
padding-left: 0;
padding-bottom: 4em;
}
.contact_top {
margin-right: 0;
margin-left: 0;
margin-bottom: 4em;
}
.contact_details {
background-color: #f6f6f6;
padding: 20px;
border-left: 2px solid #fff;
}
.contact_details h5 {
font-size: 1.2em;
font-weight: 500;
color: #666;
margin-bottom: 1em;
}
.contact_address,
.contact_mail {
overflow: hidden;
font-size: 1em;
color: #777;
line-height: 1.5em;
}
.contact_bottom h3 {
font-size: 1.5em;
font-weight: 500;
color: #666;
}
.contact_bottom p {
font-size: 1em;
line-height: 1.8em;
color: #888;
margin: 1em 0;
}
.contact-to input[type="text"] {
padding: 10px 10px;
width: 32.5%;
margin: 10px 0;
border: 1px solid #E1E2E2;
color: #999;
background: #FFF;
float: left;
outline: none;
font-size: 0.85em;
}
.text2 input[type="text"],
.text2 textarea {
width: 99%;
margin: 10px 0;
border: 1px solid #E1E2E2;
color: #999;
outline: none;
margin-bottom: 25px;
height: 150px;
padding: 10px 10px;
font-size: 0.85em;
resize: none;
}
.submit {
margin-top: 2em;
display: inline-block;
padding: 8px 20px;
font-size: 1em;
cursor: pointer;
border: none;
background: #2ABB9B;
color: #fff;
text-decoration: none;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
-o-transition: all 0.3s;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
}
.submit:hover {
text-decoration: none;
background: #22967c;
color: #fff;
}
#media (max-width: 1024px) {
.feature_grid1 {
width: 23%;
}
.banner {
min-height: 450px;
}
.banner-info {
margin-top: 4em;
}
.nbs-flexisel-nav-right {
right: 30em;
}
.nbs-flexisel-nav-left {
left: 29em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -7.6em;
}
}
#media (max-width: 800px) {
.header {
padding: 1em 0;
}
.feature_grid1 {
width: 100%;
padding: 4em 0em 0em 0;
}
.banner-info h1 {
font-size: 2em;
}
.banner {
min-height: 400px;
}
.feature_grid2 {
width: 100%;
}
.nbs-flexisel-nav-right {
right: 23em;
}
.nbs-flexisel-nav-left {
left: 22em;
}
.banner-info p {
font-size: 0.85em;
}
.toggleMenu {
padding: 0;
}
.service_box {
margin-bottom: 2em;
}
.contact_details {
margin-bottom: 2em;
}
.contact-to input[type="text"] {
width: 32%;
}
}
#media (max-width: 640px) {
.content_white p {
font-size: 1.3em;
}
.nbs-flexisel-nav-left {
left: 18.5em;
}
.nbs-flexisel-nav-right {
right: 18.5em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -5.8em;
}
.service_box h2 {
margin-bottom: 0.5em;
}
}
#media (max-width: 480px) {
.banner {
min-height: 250px;
}
.banner-info h1 {
font-size: 1.5em;
}
.banner-info p {
font-size: 0.8125em;
}
.banner-info {
margin-top: 2em;
}
.header {
padding: 0.5em 0;
}
.content_white h2 {
font-size: 1.5em;
}
.content_white p {
font-size: 1em;
}
.nbs-flexisel-nav-right {
right: 13.5em;
}
.nbs-flexisel-nav-left {
left: 13.5em;
}
.contact-to input[type="text"] {
width: 31%;
}
.nav {
top: 70px;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -5em;
}
}
#media (max-width: 320px) {
.banner-info h1 {
font-size: 1.2em;
}
.banner-info p {
font-size: 12px;
}
.banner {
min-height: 150px;
}
.content_white p {
font-size: 0.95em;
line-height: 1em;
padding: 0 10px;
}
.content_white h2 {
font-size: 1.3em;
}
.nbs-flexisel-nav-right {
right: 8.5em;
}
.nbs-flexisel-nav-left {
left: 8.5em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -4.2em;
}
h3.m_1 {
padding: 0.5em 0;
}
.contact-to input[type="text"] {
width: 99%;
}
input.text {
margin-left: 0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="container">
<a class="navbar-brand" href="index.html">
BRAND
</a>
<div class="menu">
<a class="toggleMenu" href="#">
<img src="images/nav_icon.png" alt="" />
</a>
<ul class="nav" id="nav">
<li id="navbar-home" class="current">Home
</li>
<!--<li id="navbar-services">Services</li>-->
<li id="navbar-services">Services
</li>
<li id="navbar-photos">Photos
</li>
<li id="navbar-services">
<a href="test.html" </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</div>

I have solved this problem by generating and inserting javascript code by using a tiny python script.
Each html file now features the lines below to set its corresponding navbar element active. The ID refers to the ID which I have assigned to an li element
inside the list of navbar elements (check the code above).
<script type="text/javascript">
document.getElementById('navbar-services').setAttribute('class', 'active');
</script>
However, I don' manually add these lines to each file, but instead wrote a python script to automatically insert recurring elements such as the menu bar, a footer, imports etc. by detecting instructions such as
<!-- #REPLACEWITH imports.html -->
<!-- #REPLACEWITH navbar.html -->
My script uses the processed file's name and autogenerates the javascript code for the specific context.
The critical lines for this particular problem are:
comment = (line[4:len(line)-4]).strip(); # detects an assignment to insert/generate code
if comment.startswith(token):
path = SRC_INCL+'/'+(comment[len(token):]).strip();
with open(path, 'r') as f:
lineArr=f.read().splitlines();
for repLine in lineArr:
print repLine
if path[path.rfind('/')+1:path.find(".html")] == 'navbar':
name = file[file.rfind(os.sep)+1:file.find(".html")];
print "<script type=\"text/javascript\">"
print "document.getElementById('navbar-"+name+"').setAttribute('class', 'active');"
print "</script>"
It works like a charm for my purpose and is easily extendible

My CSS broke when I fixed another issue, how do I fix my header?

Edit:
http://imgur.com/a/2Zwvq#0
Picture 1 code:
main.css
body {
font-family: arial;
font-size: 14px;
color: #1D2130;
background-image: linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -o-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -moz-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -webkit-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -ms-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.15, rgb(200,225,245)),
color-stop(0.58, rgb(240,240,240))
);
}
header {
width: 950px;
height: 60px;
}
header img{
float: left;
left: -185px;
margin-top: 10px;
position: absolute;
}
header h2 {
text-align: left;
font-size: 16px;
top: 85px;
margin-left: -200px;
font-weight: thin;
position: absolute;
font-family: Impact, Times, arial;
text-transform: uppercase;
margin-top: 15px;
}
h1 {
font-size: 48px;
text-align: center;
top: 0;
position: relative;
line-height: 1;
margin-top: 50px;
min-width: 650px;
}
h2 {
font-size: 24px;
top: -10px;
text-align: center;
position: relative;
min-width: 650px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 13px;
line-height: 1.5;
color: #000;
}
a {
font-weight: bold;
color: #d5000d;
}
header {
padding-top: 35px;
padding-bottom: 10px;
}
header h1 {
font-size: 48px;
font-weight: bold;
line-height: 1.2;
color: #303030;
letter-spacing: -1px;
}
header h2 {
font-size: 24px;
font-weight: normal;
line-height: 1.3;
color: #aaa;
letter-spacing: -1px;
}
code, pre {
margin-bottom: 30px;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
font-size: 12px;
color: #222;
}
code {
padding: 0 3px;
}
pre {
padding: 20px;
overflow: auto;
border: solid 1px #ddd;
}
pre code {
padding: 0;
}
ul, ol, dl {
margin-bottom: 20px;
}
/* COMMON STYLES */
table {
width: 100%;
border: 1px solid #ebebeb;
}
th {
font-weight: 500;
}
td {
font-weight: 300;
text-align: center;
border: 1px solid #ebebeb;
}
form {
padding: 20px;
background: #f2f2f2;
}
/* GENERAL ELEMENT TYPE STYLES */
h1 {
font-size: 2.8em;
}
h2 {
margin-bottom: 8px;
font-size: 22px;
font-weight: bold;
color: #303030;
}
h3 {
margin-bottom: 8px;
font-size: 18px;
font-weight: bold;
color: #d5000d;
}
h4 {
font-size: 16px;
font-weight: bold;
color: #303030;
}
h5 {
font-size: 1em;
color: #303030;
}
h6 {
font-size: .8em;
color: #303030;
}
p {
margin-bottom: 20px;
font-weight: 300;
}
a {
text-decoration: none;
}
p a {
font-weight: 400;
}
blockquote {
padding: 0 0 0 30px;
margin-bottom: 20px;
font-size: 1.6em;
border-left: 10px solid #e9e9e9;
}
ul li {
padding-left: 20px;
list-style: disc inside;
}
ol li {
padding-left: 3px;
list-style: decimal inside;
}
dl dd {
font-style: italic;
font-weight: 100;
}
footer {
padding-top: 20px;
padding-bottom: 30px;
margin-top: 40px;
font-size: 13px;
color: #aaa;
}
footer a {
color: #666;
}
/* MISC */
.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
content: '.';
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.type-csharp .highlight .s { color: #A31515 }
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 3 */
font: inherit; /* 2 */
color: inherit; /* 1 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box; /* 2 */
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield; /* 1 */
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
padding: 0.35em 0.625em 0.75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
legend {
padding: 0; /* 2 */
border: 0; /* 1 */
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
/* LAYOUT STYLES */
body {
font-family: 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #666;
background: #fafafa url(../pictures/body-bg.jpg) 0 0 repeat;
}
p {
margin-top: 0;
}
a {
color: #2879d0;
}
a:hover {
color: #2268b2;
}
header {
padding-top: 40px;
padding-bottom: 40px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
background: #2e7bcf url(../pictures/header-bg.jpg) 0 0 repeat-x;
border-bottom: solid 1px #275da1;
}
header h1 {
width: 540px;
margin-top: 0;
margin-bottom: 0.2em;
font-size: 72px;
font-weight: normal;
line-height: 1;
color: #fff;
letter-spacing: -1px;
}
header h2 {
width: 540px;
margin-top: 0;
margin-bottom: 0;
font-size: 26px;
font-weight: normal;
line-height: 1.3;
color: #9ddcff;
letter-spacing: 0;
}
.inner {
position: relative;
width: 940px;
margin: 0 auto;
}
#content-wrapper {
padding-top: 30px;
border-top: solid 1px #fff;
}
#main-content {
float: left;
width: 690px;
}
#main-content img {
max-width: 100%;
}
aside#sidebar {
float: right;
width: 200px;
min-height: 504px;
padding-left: 20px;
font-size: 12px;
line-height: 1.3;
background: transparent url(../pictures/sidebar-bg.jpg) 0 0 no-repeat;
}
a.button {
width: 134px;
height: 58px;
padding-top: 22px;
padding-left: 68px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 23px;
line-height: 1.2;
color: #fff;
}
a.button small {
display: block;
font-size: 11px;
}
header a.button {
position: absolute;
top: 0;
right: 0;
background: transparent url(../pictures/github-button.png) 0 0 no-repeat;
}
aside a.button {
display: block;
width: 138px;
padding-left: 64px;
margin-bottom: 20px;
font-size: 21px;
background: transparent url(../pictures/download-button.png) 0 0 no-repeat;
}
code, pre {
margin-bottom: 30px;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
font-size: 13px;
color: #222;
}
code {
padding: 0 3px;
background-color: #f2f8fc;
border: solid 1px #dbe7f3;
}
pre {
padding: 20px;
overflow: auto;
text-shadow: none;
background: #fff;
border: solid 1px #f2f2f2;
}
pre code {
padding: 0;
color: #2879d0;
background-color: #fff;
border: none;
}
ul, ol, dl {
margin-bottom: 20px;
}
/* COMMON STYLES */
hr {
height: 0;
margin-top: 1em;
margin-bottom: 1em;
border: 0;
border-top: solid 1px #ddd;
}
table {
width: 100%;
border: 1px solid #ebebeb;
}
th {
font-weight: 500;
}
td {
font-weight: 300;
text-align: center;
border: 1px solid #ebebeb;
}
form {
padding: 20px;
background: #f2f2f2;
}
/* GENERAL ELEMENT TYPE STYLES */
#main-content h1 {
margin-top: 0;
margin-bottom: 0;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 2.8em;
font-weight: normal;
color: #474747;
text-indent: 6px;
letter-spacing: -1px;
}
#main-content h1:before {
padding-right: 0.3em;
margin-left: -0.9em;
color: #9ddcff;
content: "/";
}
#main-content h2 {
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 22px;
font-weight: bold;
color: #474747;
text-indent: 4px;
}
#main-content h2:before {
padding-right: 0.3em;
margin-left: -1.5em;
content: "//";
color: #9ddcff;
}
#main-content h3 {
margin-top: 24px;
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 18px;
font-weight: bold;
color: #474747;
text-indent: 3px;
}
#main-content h3:before {
padding-right: 0.3em;
margin-left: -2em;
content: "///";
color: #9ddcff;
}
#main-content h4 {
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 15px;
font-weight: bold;
color: #474747;
text-indent: 3px;
}
h4:before {
padding-right: 0.3em;
margin-left: -2.8em;
content: "////";
color: #9ddcff;
}
#main-content h5 {
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 14px;
color: #474747;
text-indent: 3px;
}
h5:before {
padding-right: 0.3em;
margin-left: -3.2em;
content: "/////";
color: #9ddcff;
}
#main-content h6 {
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: .8em;
color: #474747;
text-indent: 3px;
}
h6:before {
padding-right: 0.3em;
margin-left: -3.7em;
content: "//////";
color: #9ddcff;
}
p {
margin-bottom: 20px;
}
a {
text-decoration: none;
}
p a {
font-weight: 400;
}
blockquote {
padding: 0 0 0 30px;
margin-bottom: 20px;
font-size: 1.6em;
border-left: 10px solid #e9e9e9;
}
ul {
list-style: disc inside;
padding-left: 20px;
}
ol {
list-style: decimal inside;
padding-left: 3px;
}
dl dd {
font-style: italic;
font-weight: 100;
}
footer {
padding-top: 20px;
padding-bottom: 30px;
margin-top: 40px;
font-size: 13px;
color: #aaa;
background: transparent url('../pictures/hr.png') 0 0 no-repeat;
}
footer a {
color: #666;
}
footer a:hover {
color: #444;
}
/* MISC */
.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
content: '.';
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) { }
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.inner {
width: 740px;
}
header h1, header h2 {
width: 340px;
}
header h1 {
font-size: 60px;
}
header h2 {
font-size: 30px;
}
#main-content {
width: 490px;
}
#main-content h1:before,
#main-content h2:before,
#main-content h3:before,
#main-content h4:before,
#main-content h5:before,
#main-content h6:before {
padding-right: 0;
margin-left: 0;
content: none;
}
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
.inner {
width: 93%;
}
header {
padding: 20px 0;
}
header .inner {
position: relative;
}
header h1, header h2 {
width: 100%;
}
header h1 {
font-size: 48px;
}
header h2 {
font-size: 24px;
}
header a.button {
position: relative;
display: inline-block;
width: auto;
height: auto;
padding: 5px 10px;
margin-top: 15px;
font-size: 13px;
line-height: 1;
color: #2879d0;
text-align: center;
background: #9ddcff none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
header a.button small {
display: inline;
font-size: 13px;
}
#main-content,
aside#sidebar {
float: none;
width: 100% ! important;
}
aside#sidebar {
min-height: 0;
padding: 20px 0;
margin-top: 20px;
background-image: none;
border-top: solid 1px #ddd;
}
aside#sidebar a.button {
display: none;
}
#main-content h1:before,
#main-content h2:before,
#main-content h3:before,
#main-content h4:before,
#main-content h5:before,
#main-content h6:before {
padding-right: 0;
margin-left: 0;
content: none;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) { }
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) { }
http://imgur.com/a/2Zwvq#1
Picture 2 code:
Main.css
body {
font-family: arial;
font-size: 14px;
color: #1D2130;
background-image: linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -o-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -moz-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -webkit-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -ms-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.15, rgb(200,225,245)),
color-stop(0.58, rgb(240,240,240))
);
}
#main-body {
height: 1000px;
width: 60%;
border-top: 0;
text-align: center;
margin-right: auto;
margin-left: auto;
position: relative;
}
header {
width: 950px;
height: 60px;
}
header img{
float: left;
left: -185px;
margin-top: 10px;
position: absolute;
}
header h2 {
text-align: left;
font-size: 16px;
top: 85px;
margin-left: -200px;
font-weight: thin;
position: absolute;
font-family: Impact, Times, arial;
text-transform: uppercase;
margin-top: 15px;
}
h1 {
font-size: 48px;
text-align: center;
top: 0;
position: relative;
line-height: 1;
margin-top: 50px;
min-width: 650px;
}
h2 {
font-size: 24px;
top: -10px;
text-align: center;
position: relative;
min-width: 650px;
}
#meter {
margin-top: 0;
float: left;
width: 72%;
margin-left: auto;
margin-right: auto;
padding-left: 30px;
}
#gauge {
position: absolute;
width: 259px;
opacity: 1;
}
.arrow {
position: absolute;
}
#right-arrow {
width: 192px;
margin-top: 125px;
margin-left: 20px;
}
#hot-arrow {
width: 41px;
margin-top: 32px;
margin-left: 114px;
display: none;
}
#cold-arrow {
width: 77px;
margin-top: 129px;
margin-left: 117px;
display: none;
}
#outputSpace {
width: 75%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 24px;
position: relative;
margin-top: 320px;
color: #1C2130;
opacity: .5;
min-width: 942px;
height: 75px;
}
.output-message {
display: none;
width: 720px;
text-align: center;
float: center;
position: relative;
margin-left: 0;
}
#buttonArea {
margin-top: -35px;
width: 80%;
margin-right: auto;
margin-left: auto;
min-width: 700px;
}
#numberField {
margin: 25px;
width: 60%;
height: 40px;
border-radius: 5px solid gray;
display: inline-block;
left: 0;
color: black;
}
#Button1 {
height: 50px;
width: 15%;
margin-left: 10px;
border-radius: 20px;
border: none;
background-color: #c1300d;
display: inline-block;
color: white;
font-size: 18px;
margin-top: 10px;
}
.content-current
{
display: block !important;
}
index.html (pretty much the same for both pages)
<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="developerBlog">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/tabs.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link data-require="semantic-ui#*" data-semver="0.9.6" rel="stylesheet" href="https://raw.github.com/Semantic-Org/Semantic-UI/0.9.6/build/packaged/css/semantic.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="javascripts/modernizr.custom.js"></script>
<script data-require="semantic-ui#*" data-semver="0.9.6" src="https://rawgit.com/Semantic-Org/Semantic-UI/0.9.6/build/packaged/javascript/semantic.min.js"></script>
<script data-require="angular.js#1.3.x" src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
<script src="myDirectives.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Danieboy.GitHub.io by Dan Andersson</title>
</head>
<body ng-controller="BlogController as blog">
<svg class="hidden">
<defs>
<path id="tabshape" d="M80,60C34,53.5,64.417,0,0,0v60H80z"></path>
</defs>
</svg>
<header>
<div class="inner">
<h1>Danieboy.GitHub.io</h1>
<h2>Developer blog</h2>
<p class="support">Your browser does not support <strong>flexbox</strong>! <br />Please view this demo with a <strong>modern browser</strong>.</p>
</div>
</header>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
<div class="tabs tabs-style-shape">
<nav>
<ul>
<li>
<a href="#section-shape-1">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>Start</span>
</a>
</li>
<li>
<a href="#section-shape-2">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>Resume</span>
</a>
</li>
<li>
<a href="#section-shape-3">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>My Projects</span>
</a>
</li>
<li>
<a href="#section-shape-4">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>Reviews</span>
</a>
</li>
<li>
<a href="#section-shape-5">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-shape-1">
<start></start>
</section>
<section id="section-shape-2">
<resume></resume>
</section>
<section id="section-shape-3">
<myprojects></myprojects>
</section>
<section id="section-shape-4">
<reviews></reviews>
</section>
<section id="section-shape-5">
<contact></contact>
</section>
</div>
</div>
</section>
</div>
</div>
<script src="javascripts/cbpFWTabs.js"></script>
<script>
(function() {
[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
new CBPFWTabs( el );
});
})();
</script>
</body>
</html>
Previous post:
AngularJS - Loading my directives suddenly not working?
Website:
http://danieboy.github.io/
http://danieboy.github.io/bmi-calculator/index.html
So when I fixed so that my tabs would properly show the the information to the corresponding tab thanks to the help of #pankajparkar by adding:
.content-current{display: block !important;}
To my css file - the header broke. I would say that I am terrible at CSS so that's why I'm asking - I am more of a back-end programmer so sorry if this is a very simple question but I'd like to learn more about this. The website got quite a few CSS files so I'm not going to post them all here. But as you probably know you can go on the website in Google Chrome and press F12 -> Sources to see them all.
Thanks in advance!

As your styling is terrible :P
just do this to header and it's fixed for you..
header {
width: 950px;
height: 150px;
}
or a best solution set height to auto like
header {
width: 950px;
height: auto;
}
Moreover if you want to align your header in center
header {
width: 950px;
height: auto;
margin: 0 auto;
}
and one Last thing :D
apply this for your header bottom text ;)
header h2 {
text-align: left;
font-size: 16px;
top: 38px;
font-family: Impact, Times, arial;
text-transform: uppercase;
margin-top: 15px;
position: relative;
}

On http://danieboy.github.io/ you have fixed height and width for your header (row 30 in main.css). Just remove that and it will work for you.
On http://danieboy.github.io/bmi-calculator/index.html you have to set both width and height to auto for your header and it will work.