Related
I am working on menu header but somehow all my elements are not getting aligned in one horizontal line. They are getting shown just below each other. Here is my jsfiddle
Below is my HTML:
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></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>
And here is my 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);
}
.topnav {
background-color: #333;
overflow: hidden;
padding: 0 10px;
}
.topnav > img,
nav {
display: inline-block;
vertical-align: middle;
}
nav > ul {
margin: 0;
}
.topnav .dropdown {
display: block;
float: left;
text-align: center;
}
.topnav a {
color: white;
display: block;
font-size: 17px;
text-decoration: none;
}
.topnav .dropdown > a {
padding: 20px 16px;
}
.topnav .dropdown-content li > a {
padding: 10px 16px;
}
.topnav ul > li > ul {
background-color: #f76c38;
display: none;
padding: 0;
position: absolute;
width: 200px;
}
.topnav ul > li > ul > li {
display: block;
text-align: left;
}
body {
border: 0;
height: 100%;
margin: 0;
min-height: 100%;
overflow-x: hidden;
}
.fa-6 {
font-size: 1.5em;
}
.login {
color: white;
display: inline;
font-family: AvantGarde;
font-size: 11.433px;
letter-spacing: .25em;
padding-left: 15px;
}
.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 {
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
color: white;
font-family: Adelle PE;
font-size: 12px;
font-style: italic;
letter-spacing: .30em;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
font-family: Adelle PE;
letter-spacing: .30em;
}
li.get-covered:hover {
background-color: #EF7440;
}
li.insurance {
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
margin-left: 80px;
margin-right: 80px;
}
I want everything to be aligned horizontally in one line in the menu header. As an example look at this image, it is slightly tilted but you will get an idea how my menu header looks on that black background.
Add the following to your CSS:
nav > ul > li {
display:inline-block;
}
You can use display:flex.
#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);
}
.topnav {
background-color: #333;
overflow: hidden;
padding: 0 10px;
display: flex;
align-items: center;
}
.topnav > img,
nav {
display: block;
}
nav > ul {
margin: 0;
display: flex;
align-items: center;
}
.topnav .dropdown {
}
.topnav a {
color: white;
display: block;
font-size: 17px;
text-decoration: none;
}
.topnav .dropdown > a {
padding: 20px 16px;
}
.topnav .dropdown-content li > a {
padding: 10px 16px;
}
.topnav ul > li > ul {
background-color: #f76c38;
display: none;
padding: 0;
position: absolute;
width: 200px;
}
.topnav ul > li > ul > li {
display: block;
text-align: left;
}
body {
border: 0;
height: 100%;
margin: 0;
min-height: 100%;
overflow-x: hidden;
}
.fa-6 {
font-size: 1.5em;
}
.login {
color: white;
display: inline;
font-family: AvantGarde;
font-size: 11.433px;
letter-spacing: .25em;
padding-left: 15px;
}
.login a {
color: white;
text-decoration: none;
}
.login a:hover {
color: #fe5b1f;
text-decoration: none;
}
.container {
width: 100% !important;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.our-story {
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
color: white;
font-family: Adelle PE;
font-size: 12px;
font-style: italic;
letter-spacing: .30em;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
font-family: Adelle PE;
letter-spacing: .30em;
}
li.get-covered:hover {
background-color: #EF7440;
}
li.insurance {
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
margin-left: 80px;
margin-right: 80px;
}
I am working on left sidebar on my HTML page. My left sidebar has few texts which if we click then they should drop down and show few other texts:
Here is my jsfiddle: https://jsfiddle.net/g2ahx6nq/40/
I have these below texts:
OUR DNA
PROGRAMS
RESEARCH
STORIES
So If I click any of the above texts on my left side bar it should drop down and show other texts belonging to them. Technically it should be like this image: https://s3.postimg.org/gbxn8hkf7/home1.png
As you can see in the left sidebar (in the above image), expanded versions of each of the above texts. I have to match the color and font as it is. Below is my HTML code for left bar navigation but somehow my click is not working at all and also not able to match the font and size as well. I am also missing the drop down arrow as well.
<div id="leftBar">
<br />
<svg id="clippedImg" width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="1 100%,131 100%,130 0,0 0">
</polygon>
</clipPath>
</svg>
<nav>
<ul>
<li class="dropdown">
OUR DNA
<ul class="dropdown-content">
<li><i>RISK</i></li>
</ul>
</li>
<li class="dropdown">
PROGRAMS
<ul class="dropdown-content">
<li><i>PROFESSIONAL</i></li>
<li><i>ADVENTURE SPORT</i></li>
<li><i>ENTERTAINMENT</i></li>
<li><i>COLLEGIATE</i></li>
<li><i>INDIVIDUAL</i></li>
<li><i>COMMERCIAL</i></li>
</ul>
</li>
<li class="dropdown">
RESEARCH
<ul class="dropdown-content">
<li><i>CORPORATE SURVEY</i></li>
<li><i>INDIVIDUAL SURVEY</i></li>
</ul>
</li>
<li class="dropdown">
STORIES
</li>
</ul>
</nav>
</div>
And this is my CSS:
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav ul li {
display:inline-block;
position:relative;
}
nav ul li a {
color: #fff;
text-decoration: none;
cursor: pointer;
padding: 10px 20px;
display: block;
width: 80px;
}
nav ul li a:hover {
background: #00648C;
}
ul.dropdown-content {
position: absolute;
display: none;
}
What is wrorng I am doing by which my click is not working? And how can we match the font, color as well?
Updated
Try this fiddle https://jsfiddle.net/jgf90mh9/18/
$(document).ready(function(){
$(".dropdown a").click(function(){
$(this).closest('.dropdown').find('.dropdown-content').slideToggle(200);
$(this).closest('.dropdown').siblings('.dropdown').find('.dropdown-content').slideUp(200);
});
});
Try giving the nav ul selector in the css a position and z-index, the 'top' element and img are on top of the list so you are not actualy clicking the list items.
css:
nav ul {
z-index:10;
position:absolute;
list-style-type:none;
margin:0;
padding:0;
}
I haven't fixed the style problems with the list though ;)
Update: also try to add this
nav{
height:auto;
}
and change this position to relative
ul.dropdown-content {
position: relative; //was absolute
display: none;
}
Edit: additional changes made
.dropdown-content li a{
font-size:11px;
}
*{
box-sizing:border-box; //using this on all elements, element size wont change when you set borders. giving a 2px border to a 150px div, the div will remain 150px. Same goes for paddings.
}
nav ul li {
display:inline-block;
position:relative;
width:100%; //makes sure the hover effect is the same width with all Li's
}
nav ul li a{
display:flex;
justify-content:space-between; //spreads the li's text and arrow, arrows on 1 line
}
#leftBar {
background-color: #030303;
box-shadow: 2.996px 0.157px 7.65px 1.35px rgba(40, 40, 41, 0.25);
border-right: solid #EF7440;
border-right-width: 4px;
top: 0px;
bottom: 0px;
left: 0px;
height: 2278px;
position: absolute;
width: 150px; //gives more space for the arrow next to text.
}
Because of z-index: 2 you've set in #clipimgA1 make your image overlap #leftBar div. You can not interact with #leftBar now since it is underneath of #clipimgA1 although you still can see it due to opacity: 0.5 you have set in #clipimgA1. I commented z-index: 2; opacity: 0.5 in #clipimgA1 and it now works as expected
$(document).ready(function(){
$(".dropdown").click(function(e){
e.preventDefault();
var $this = $(this).children(".dropdown-content");
$(".dropdown-content:visible").not($this).slideToggle(200); //Close submenu already opened
$this.slideToggle(200); //Open the new submenu
});
});
* {
margin: 0px;
}
body {
margin: 0px;
overflow-x: hidden;
}
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
td,
div,
ul,
li {
margin: 0px;
padding: 0px;
text-decoration: none;
list-style: none;
}
.login {
position: relative;
top: -50px;
z-index: 9999;
color: white;
text-decoration: none;
padding: 0 10px;
font-size: 13px;
}
.signup {
position: relative;
top: -50px;
z-index: 9999;
color: white;
text-decoration: none;
padding: 0;
font-size: 13px;
}
.above {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
position: relative;
z-index: 9999;
top: -60px;
padding: 0 5px;
}
.fa {
color: white;
margin: 5px;
}
img {
/* Set max width to be 100% of the containing element */
max-width: 100%;
max-height: 100%;
}
body .company-bio p {
font-family: 'agenda';
margin-bottom: 20px;
letter-spacing: .18em;
font-family: 'agenda';
font-weight: 400;
color: rgb(254, 254, 255);
}
div.company-bio {}
body .company-bio {
position: relative;
top: -42px;
padding-top: 40px;
margin-left: 131px;
/*Added Just now */
padding-bottom: 40px;
max-width: 100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");
padding-left: 140px;
padding-right: 155px;
font-size: 20px;
font-family: "Adelle PE";
}
.top h1 {
color: #f86d2c;
font-style: italic;
font-size: 37px;
}
.top p {
color: white !important;
background-color: black;
}
.mission-statements .programs {
position: relative;
top: 60px;
width: 300px;
border-style: solid;
border-width: 4px;
text-align: center;
font-size: 19px;
border-color: #EF7440;
padding: 25px;
margin: 25px;
margin-left: auto;
margin-right: auto;
text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.16);
font-family: "adelle regular";
color: rgb(40, 40, 41);
line-height: 1.979;
}
.top h4 {
font-size: 25px;
font-family: "ITC Avant Garde Gothic";
color: rgb(255, 255, 255);
text-transform: uppercase;
line-height: 1.792;
text-align: left;
-moz-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
-webkit-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
-ms-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
position: absolute;
left: 684.247px;
top: 280.77px;
}
.top h2 {
position: absolute;
top: 320px;
left: 450px;
letter-spacing: .3em;
font-size: 22px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
color: rgb(255, 255, 255);
text-transform: uppercase;
line-height: 1.6;
text-align: center;
text-shadow: 0px 3px 6.37px rgba(40, 40, 41, 0.004);
}
body .northmanwild .title {
/* background-image:url(assets/img/Uploads/insta-pics.png); */
width: 100%;
padding-bottom: 40px;
padding-top: 40px;
text-align: center;
font-size: 37px;
margin-top: 0px !important;
margin-bottom: 0px !important;
font-family: "Adelle PE";
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
line-height: 1.979;
text-align: center;
/*text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.5);
opacity: 100%;
fill: 57%;
*/
}
div.leftBar-bottom {
background-image: url("https://s17.postimg.org/yvv4w2gmn/nav-background.png");
float: left;
}
div.northmanwild {
margin-top: -2px;
width: 90.1%;
float: right;
opacity: 0.8;
margin-bottom: -7px;
}
body .footer {
width: 90.3%;
float: right;
color: rgb(40, 40, 41);
padding-top: 30px;
padding-bottom: 20px;
font-weight: normal;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(assets/img/Uploads/footer-bg.png);
}
/*FIGURE OUT PROBLEM WITH MISSION STATEMENTS*/
body .mission-statements {
margin-left: 131px;
padding-bottom: 130px;
padding-left: 45px;
padding-right: 45px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(assets/img/Uploads/bg-trees.png);
}
body .mission-statements .why {
padding-top: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding-bottom: 40px;
padding-left: 40px;
position: relative;
left: -40px;
top: 30px;
}
body .mission-statements .how {
padding-top: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding-bottom: 10px;
padding-right: 40px;
}
body .mission-statements .what {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
left: -40px;
top: 30px;
}
body .mission-statements .why pre {
padding-left: 40px;
}
body .mission-statements .how {
margin-top: 0px !important;
padding-right: 0px;
margin-bottom: 0px !important;
}
/*.top .imgB1
{
position: relative;
top: -225px;
}
*/
.top {
position: relative;
top: 0;
left: 0;
margin-bottom: -7px;
}
.imgA1 {
position: relative;
top: 0;
left: 0;
}
.clippedmain {
position: absolute;
top: 0;
left: 0;
}
#clippedImg {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#clipimgA1 {
/*Chrome,Safari*/
-webkit-clip-path: polygon(1px 100%, 131px 100%, 130px 0px, 0px 0px);
position: absolute;
top: 0;
left: 0;
/*z-index: 2;
opacity: 0.5;*/
}
/*Firefox*/
clip-path: url("#clipPolygon");
/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTI1LDI1MCBMNzAsMjUwIDcxLDI4NSAyNjAsMjg1IDI2MSwyNTAgMTYwLDI1MCAxNjAsMTE1IDIyNSwxMTUgMjI1LDkwIDE2MCw5MCAxNjAsNzAgMjUsNzAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0yNSwyNTAgTDcwLDI1MCA3MSwyODUgMjYwLDI4NSAyNjEsMjUwIDE2MCwyNTAgMTYwLDExNSAyMjUsMTE1IDIyNSw5MCAxNjAsOTAgMTYwLDcwIDI1LDcwIHoiICAvPgo8L3N2Zz4=) no-repeat;
}
.imgB1 {
position: absolute;
top: -65px;
left: 70px;
}
.footer .footer-section1 {
float: left;
width: 33%;
}
.footer .footer-section2 .block-title {
position: relative;
width: 338px;
left: -140px;
font-size: 16px !important;
font-family: "AvantGarde";
color: rgb(40, 40, 41);
/* font-style: italic; */
letter-spacing: 4px;
border-bottom: 2px solid #000000;
}
.footer .footer-section2 .block-content {
font-style: italic;
line-height: 1.52;
top: 18px;
left: 52px;
position: relative;
}
.footer .footer-section3 .block-content {
position: relative;
line-height: 1.52;
left: 12px;
letter-spacing: 4px;
top: 15px;
font-style: italic;
}
.footer .footer-section3 .block-title {
border-bottom: 2px solid #000000;
width: 60%;
left: 14px;
position: relative;
}
.footer .footer-section1 .block-content {
position: relative;
line-height: 1.52;
top: 67px;
left: 125px;
font-style: italic;
}
.footer .footer-section2 {
position: relative;
left: -89px;
}
.footer .footer-section2 {
float: left;
width: 33%;
}
.footer .footer-section3 {
float: left;
width: 33%;
}
.scroll-down {
opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;
}
.scroll-down {
position: absolute;
bottom: 28px;
left: 55%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
background-size: 14px auto;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
section.ok {
position: relative;
top: 2000px;
}
.copy-rights {
font-size: 16px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
top: 48px;
display: block;
font-size: 12px;
text-align: center;
color: rgb(40, 40, 41);
font-style: italic;
-moz-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
-webkit-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
-ms-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
font-style: normal;
}
#leftBar {
/*background-color: #030303;*/
box-shadow: 2.996px 0.157px 7.65px 1.35px rgba(40, 40, 41, 0.25);
border-right: solid #EF7440;
border-right-width: 4px;
top: 0px;
bottom: 0px;
left: 0px;
height: 2278px;
position: absolute;
width: 131px;
/*Commented today */
/* opacity: 0.5; */
}
/*
#holder {
width: 700px;
margin-left: 263px;
padding-left: 50px;
margin-top: 10px;
height: 100%;
float: right;
position: fixed;
}
*/
#font-face {
font-family: BEBAS;
src: url("http://webdesigncove.com/fonts/BEBAS___.ttf")
}
h1.logo {
font-size: 26px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
text-transform: uppercase;
line-height: 1.2em;
letter-spacing: -3px;
color: white;
text-align: center;
padding-top: 10px;
}
h1.postTitle {
font-family: BEBAS, Helvetica, Verdana, Sans-Serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
letter-spacing: .28em;
line-height: 1.45em;
}
#navigation {
padding: 0;
margin: 0;
text-align: center;
position: relative;
z-index: 3;
}
#navigation li {
list-style-type: none;
margin-bottom: 5px;
}
#navigation a:link {
font-family: "ITC Avant Garde Gothic";
font-size: 15px;
font-style: normal;
}
#navigation a:visited {
color: rgb(255, 255, 255);
}
#navigation a:hover {
color: #FE5B1F;
}
.copy-right-text {
font: Bold 12px 'Open Sans';
color: #ffffff;
padding-top: 10px;
text-align: center;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav ul li {
display:inline-block;
position:relative;
}
nav ul li a {
color: #fff;
text-decoration: none;
cursor: pointer;
padding: 10px 20px;
display: block;
width: 80px;
}
nav ul li a:hover {
background: #00648C;
cursor: pointer;
}
ul.dropdown-content {
/*position: absolute;*/
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<img id="clipimgA1" class="clippedmain" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png" alt="img">
<img class="imgA1" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png">
</div>
<div id="leftBar">
<br />
<svg id="clippedImg" width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="1 100%,131 100%,130 0,0 0">
</polygon>
</clipPath>
</svg>
<nav>
<ul>
<li class="dropdown">
OUR DNA
<ul class="dropdown-content">
<li><i>RISK</i></li>
</ul>
</li>
<li class="dropdown">
PROGRAMS
<ul class="dropdown-content">
<li><i>PROFESSIONAL</i></li>
<li><i>ADVENTURE SPORT</i></li>
<li><i>ENTERTAINMENT</i></li>
<li><i>COLLEGIATE</i></li>
<li><i>INDIVIDUAL</i></li>
<li><i>COMMERCIAL</i></li>
</ul>
</li>
<li class="dropdown">
RESEARCH
<ul class="dropdown-content">
<li><i>CORPORATE SURVEY</i></li>
<li><i>INDIVIDUAL SURVEY</i></li>
</ul>
</li>
<li class="dropdown">
STORIES
</li>
</ul>
</nav>
</div>
<ul class="above">
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
<a class="login" href="#">Log In |</a>
<a class="signup" href="#">Sign Up</a>
<div class="leftBar-bottom">
</div>
<!-- End Side bar div-->
<div class="company-bio">
<p align="center" style="font-family: Adelle PE">Hello World </p>
<p align="center" style="font-family: Adelle PE">Nice Text! </p>
<p align="center">Hello David</p>
</div>
Updated: I've commented position: absolute from
ul.dropdown-content {
/*position: absolute;*/
display: none;
}
and it instantly achieves some effects you wanted
HTML
<div class="NavAlignLeft">Site Name</div>
<div class="NavAlignRight">
<!-- Change this to an include later -->
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<!-- Video test -->
<div id="video_overlays">
<div class="abovethefold">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?>
<p class="button">
<a class="blue-button" href="#cta">Call to Action</a></p>
</div></div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
<img src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag">
</video>
<div class="poster hidden">
<img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
</div>
</div>
</div></div>
CSS:
body {
background-color: #e2e2e2;
margin: 0px;
}
h1, .h1,
h2, .h2,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Vollkorn', serif;
font-style: oblique;
font-weight: normal;
color: #2e2e2e;
}
h3, .h3 {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 30px;
color: #fff;
}
.NavAlignLeft {
font-family: 'Vollkorn', serif;
/*font-style: oblique;*/
font-weight: bold;
font-size: 22px;
color: #fff;
float: left;
padding-left: 40px;
}
.NavAlignLeft:hover {
font-family: 'Vollkorn', serif;
text-decoration: none;
}
.NavAlignRight {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #fff;
float: right;
padding-right: 40px;
}
.NavAlignLeft, .NavAlignRight {
/*{ width: 50%; Commenting this out made the nav align completely to the right.*/
display: inline-block;
}
a, .a,
a:visited, .a:visited,
a:active, .a:active {
font-family: 'Vollkorn';
font-style: none; color: #e2e2e2; text-decoration: none;
}
a:hover, .a:hover {
font-family: 'Vollkorn';
font-style: none; color: #fff; text-decoration: none;
}
/*
* Override Bootstrap's default container.
*/
/*#media (min-width: 1200px) {
.container {
width: 100%; padding: 0; margin: 0; vertical-align: middle;
}
} .container2 { width: 100%; padding: 0; margin: 0; }
Nothing changed */
/*
* Masthead for nav
*/
#blog-masthead {
background-color: #2e2e2e;
height: 40px;
width: 100%;
line-height: 40px;
/*z-index: 2;
/*vertical-align: middle;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing Changed */
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
border-bottom: 1px solid #1a1a1a;
}
.abovethefold {
background-color: transparent;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
/*height: 250px;
width: 100%;
/*padding-top: 100px;*/
/*vertical-align: middle;
justify-content:center;
align-content:center;
}
.overlay {
background:#2e2e2e;
opacity:40%;
height: 250px;
width: 100%Nothing changed.*/
}
/* Nav links */
.blog-nav-item {
/*position: relative;
display: inline-block;
padding: 5px;
color: #2e2e2e; nothing changed*/
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
/*position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent; Nothing Changed*/
}
.menu-menu-1-container {
/*width: 100%;
vertical-align: middle;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing changed*/}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 0px;
margin-bottom: 0;
line-height: 80px;
margin-top: 100px;
font-size: 60px;
text-align:center;
font-weight: normal;
color: #fff;
}
.blog-description {
font-size: 30px;
font-style: 'Open Sans';
font-weight: bold;
text-align: center;
color: #2e2e2e;
}
.blog-main {
font-size: 18px;
line-height: 1.5; nothing changed
}
/* Buttons */
.green-button,.green-button:link,.green-button:visited,.blue-button,.blue-button:link,.red-button,.red-button:link,.purple-button,.purple-button:link,.teal-button,.teal-button:link,.orange-button,.orange-button:link,.grey-button,.grey-button:link,.grey-button:visited,.lt-grey-button,.lt-grey-button:link,.lt-grey-button:visited,.shop_table .actions .button,.oldernewer a:link,.oldernewer a:visited,.woocommerce-message .button,#place_order,html body div .quiz-submit, input.course-start {
display: block;
border: 0;
border-radius:1em;
-webkit-border-radius:border-radius:.8em;
text-align: center;
font-size: 20px !important;
padding: 10px 20px;
width: 180px;
}
p.button {
text-align: center;
}
p.button:hover {
text-align: center;
text-decoration: none;
}
p.button a {
margin:0 auto;
font-family: 'Vollkorn', serif;
font-style: none;
text-decoration: none;
}
.blue-button,.blue-button:link,.blue-button:visited {
background: #2f75c5;
color: #f8f8f8 !important;
text-decoration: none;
}
.blue-button:hover {
background: #3584de;
cursor: pointer;
text-decoration: none;
}
.blue-button:active {
background: #2966ab;
font-style: none;}
/* Sidebar modules for boxing content */
/* Sidebars arent being used
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
*/
/* Pagination */
.pager {
/*margin-bottom: 60px;
text-align: left;nothing changed*/
}
.pager > li > a {
/* width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 0px;
list-style: none; nothing changed*/
}
/*
* Blog posts
*/
.blog-post {
margin:50px 50px 0;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px; color: #2e2e2e;
}
.subtitle {
font-size: 1.2em;
font-family: 'Vollkorn';
color: #2e2e2e;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #2e2e2e;
border-top: 1px solid #1a1a1a;
-webkit-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*** lyrathemes - custom styling ***/
.page_item {
list-style: none;
font-size: 22px;
text-decoration: none;
}
.page_item:hover {
list-style: none;
text-decoration: none;
}
ul.blog-nav {
/*list-style: none;*/
}
/* Nav links */
.menu-item a{
position: relative;
/*display: inline-block; keep this commented out - moved navigation vertically.*/
padding: 10px;
color: #e2e2e2;
}
.menu-item a:hover,
.menu-item a:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.menu-item.current-menu-item a{
color: #fff;
}
.menu-item.current-menu-item a:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
/*content: " ";*/
/* border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;*/
-webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
}
/*Not using side bars
.sidebar-module ul {
list-style: none;
padding-left: 0;
}*/
/* Video CSS */
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
width: auto;
height: 400px;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: absolute;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
/*background: #000;*/
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
/*z-index: 100;*/
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
/*z-index: 0;*/
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
#video_overlays {
position:absolute;
float:left;
width:100%;
height:400px%;
background-color:transparent;
z-index:1;
}
/* Content Table Styles */
#green-table {
background-color: #ebf2e6;
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin: auto;
margin-top:30px;
margin-bottom: 30px;
border: 1px solid #d6e8c5;
border-radius:.8em;
}
#dark-table {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#dark-narrow-table {
background-color: #2e2e2e;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
margin: auto;
border-radius:.8em;
}
/*Heading Styles*/
#light-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
#green-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-narrow-table-head-style{
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
/*Content Paragraph Styles*/
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
#dark-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#dark-narrow-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#green-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
/* Hamburger Test */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2e2e2e;
}
/* Float the list items side by side */
ul.topnav li {float: left;
height: 40px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #e2e2e2;
text-align: center;
padding: 0px 10px 0px 0px;
text-decoration: none;
transition: 0.3s;
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #e2e2e2;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #3b3b3b;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* Hamburger mobile test */
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Fixing Mobile Div Problem */
#media only screen and (max-device-width: 680px) {
#green-table {
width: 95%;
}
#dark-narrow-table {
width: 95%;
}
.NavAlignRight {
padding-right: 2px;
}
.NavAlignLeft {
padding-left: 2px;
JS:
//jQuery is required to run this code
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
So it loooks absolutely fine when it's displayed on my website http://scott.ewarena.com/blog but when viewed on a mobile device there's a gap along the top, underneath the top bar, before the video, that shouldn't be there.
I can't find out what the issue is at all, I've been trying for two days.
Sorry my code is so clunky. I'm new at this and aware it needs cleaning up a bit.
Any help will be MUCH appreciated!
Thanks!
Scott
Having looked at your code in Chrome Dev Tools I noticed that you have the following defined in your style-sheet:
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
If you remove bottom: 0; you wont have this problem!
Basically, you're forcing the video to be at the bottom most point in it's container, creating a gap when the view-port is smart-phone sized.
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?
I created a slideToggle menu that for some reason seems to jump around when it slides up and down. The border bottom of the sliding header just flies around and glitches when the menu slides up and down, but otherwise the slideToggle works fine.
I've tried setting the position of the .headermenu to relative as well as hiding the overflow, but neither of these seemed to have fixed the issue. Does slide toggle just not work properly with a border bottom or is the issue in my code?
The glitch is difficult to explain, but the glitch shows in my code snippet, so I suggest you view it to get an understanding of what's happening. Basically the border bottom is bouncing around when the menu slides down.
In order to activate the drop down header you have to click the little broken image in the corner, which will activate the menu (so you can see the glitch in action.)
Is it related to some sort of start height for the animation? Do I need the animation to start at a specific point in the page or is it something else entirely?
$(document).ready(function(){
$("button").click(function(){
$(".headermenu").slideToggle();
$(".headermenu").height('150')
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid white 1px;
color: white;
float: left;
height: 60px;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150px;
}
.headermenu {
background-color: blue;
border-bottom: solid white 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<title>Why Have There Been No Great Women Artists?</title>
</head>
<body>
<header>
<button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
</body>
</html>
$(document).ready(function () {
$("button").click(function () {
$(".headermenu").slideToggle('slow', function () {
$(this).height('150');
});
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#essay {
background-color: white;
height: 400px;
padding-top: 60px;
width: 100%;
}
#essaytext {
width: 830px;
margin: auto;
padding-top: 30px;
}
#gallery {
background-color: blue;
height: 1000px;
width: 100%;
}
#gallery a{
color: white;
}
#gallery h2 {
color: white;
font-size: 28px;
}
#gallerytext {
margin: auto;
padding-bottom: 50px;
padding-top: 50px;
width: 830px;
}
#grid {
margin: auto;
padding-top: 30px;
width: 830px;
}
#gridone {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridtwo {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridthree {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfour {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfive {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridsix {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid white 1px;
color: white;
float: left;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150;
}
header > div:first-child
{
height: 60px;
}
.headermenu {
background-color: blue;
border-bottom: solid white 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
#home {
color: white;
display: block;
font-family: 'monaco';
font-size: 16px;
padding-left: 40px;
padding-right: 0px;
padding-top: 17px;
margin: auto;
}
h2 {
color: blue;
font-family: 'monaco';
font-size: 28px;
font-weight: normal;
}
nav#mobile-nav {
display: none;
z-index: 100;
width: 100%;
}
p {
font-family: 'monaco';
font-size: 16px;
line-height: 21px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div>
<button><img id="hamburger" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Menu,_Web_Fundamentals.svg/2000px-Menu,_Web_Fundamentals.svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
</div>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
<div id="essay">
<div id="essaytext">
<h2>The Essay</h2>
<p>“Why Have There Been No Great Women Artists?” is an essay by Linda Nochlin that details how centuries of oppression and misogyny has led to a male dominated art world. Nochlin explains through her essay how sexism has prevented women from fully being recognized as historically significant artists.</p>
Read The Essay →
</div>
</div>
<div id="gallery">
<div id="gallerytext">
<h2>The Gallery</h2>
<p>This website is intended to shed a light on the many incredible women in art who have been overshadowed due to their gender. By viewing the gallery you can see the incredible works of women artists whose significant contributions to the art world have been cast aside because of their womanhood.</p>
<div id="grid">
<a href="./judy.html">
<div id="gridone">
"The Dinner Party"<br>
Judy Chicago
</div>
</a>
<a href="./kara.html">
<div id="gridtwo">
"A Subtlety"<br>
Kara Walker
</div>
</a>
<a href="./mendieta.html">
<div id="gridthree">
"Alma Silueta en Fuego"<br>
Ana Mendieta
</div>
</a>
<a href="./georgia.html">
<div id="gridfour">
"Black Iris"<br>
Georgia O'Keeffe
</div>
</a>
<a href="./frida.html">
<div id="gridfive">
"The Two Fridas"<br>
Frida Kahlo
</div>
</a>
<a href="./artemesia.html">
<div id="gridsix">
"Judith Slaying Holofernes"<br>
Artemisia Gentileschi
</div>
</a>
</div>
</div>
</div>
The problem is you have a white bottom border in .headermenu. If you remove that that fixes the problem.
There are other issues however, you are using pixels in the z-index, when that parameter only accepts a number.
Also, it doesn't look to me like you need $(".headermenu").height('150');. If you do, then it should be $(".headermenu").height(150); - without the quote around the number of pixels.
EDIT
It appears you need to add top: 6px; to .headermenu (at least to look correct to me in Firefox). I can't tell you why exactly, but it appears to be to do with the hamburger button being floated and not taking up enough vertical height (padding/margin).
$(document).ready(function(){
$("button").click(function(){
$(".headermenu").slideToggle();
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#essay {
background-color: white;
height: 400px;
padding-top: 60px;
width: 100%;
}
#essaytext {
width: 830px;
margin: auto;
padding-top: 30px;
}
#gallery {
background-color: blue;
height: 1000px;
width: 100%;
}
#gallery a{
color: white;
}
#gallery h2 {
color: white;
font-size: 28px;
}
#gallerytext {
margin: auto;
padding-bottom: 50px;
padding-top: 50px;
width: 830px;
}
#grid {
margin: auto;
padding-top: 30px;
width: 830px;
}
#gridone {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridtwo {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridthree {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfour {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfive {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridsix {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid red 1px;
color: white;
float: left;
height: 60px;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150;
}
.headermenu {
background-color: green;
border-bottom: solid red 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 60px;
position: relative;
width: 100%;
top: 6px;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
z-index: 200;
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
#home {
color: white;
display: block;
font-family: 'monaco';
font-size: 16px;
padding-left: 40px;
padding-right: 0px;
padding-top: 17px;
margin: auto;
}
h2 {
color: blue;
font-family: 'monaco';
font-size: 28px;
font-weight: normal;
}
nav#mobile-nav {
display: none;
z-index: 100;
width: 100%;
}
p {
font-family: 'monaco';
font-size: 16px;
line-height: 21px;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<title>Why Have There Been No Great Women Artists?</title>
</head>
<body>
<header>
<button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
</body>
</html>