Topnav is the navigation bar. I've also included other parts of the website like the about section for my portfolio, so it shows more code than what is required.
I'm trying to make my menu pop out when I click the burger icon button. What is currently happening is that the home, about, and contact button hides, and the burger icon replaces that but the menu isn't popping when I click the burger icon.
function myFunction() {
var x = document.getElementById("homee");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
section {
width: 100%;
height: 90vh;
background-image: url(white.jpeg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.topnav {
background-color: white;
overflow: hidden;
}
.topnav a {
float: left;
color: Black;
text-align: center;
font-family: tahoma;
text-transform: uppercase;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
float: right
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav-right {
float: left;
}
/*RESPONSIVE*/
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
/*RESPONSIVE*/
.llin {
border: 0px;
background-color: transparent;
}
.textcon p:nth-child(1) {
font-family: Calibri;
line-height: 1px;
font-weight: bold;
color: black;
font-size: 120%;
margin-top: -30%;
margin-left: 23%;
}
.textcon p:nth-child(2) {
font-family: Calibri;
padding: 0px;
font-weight: bold;
letter-spacing: 1px;
color: black;
font-size: 300%;
line-height: 1em;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 23%;
}
.textcon p:nth-child(3) {
font-family: sans-serif;
color: black;
font-size: 120%;
margin: 0;
width: 80%;
text-align: left;
line-height: 100%;
margin-left: 23%;
}
.textcon p {
line-height: 2%;
margin-left: 13%;
margin-bottom: 0%;
}
.textcon {
position: absolute;
left: 17%;
top: 42%;
transform: translate(-13%, -42%);
width: 80%;
height: 1%;
}
.textcon button {
width: 50%;
height: 8vh;
border-radius: 10px;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
margin-top: 2%;
margin-left: 30%;
margin-bottom: 3%;
padding-bottom: 0;
}
.downcv {
background-color: #0b0b0b;
color: white;
border: none;
}
<section class="topsec">
<!---Navigator-->
<div class="topnav" id="homee">
Contact
About
Resume
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<div class="topnav-right">
<form action="https://www.linkedin.com/in/ananya-makwana-56989142">
<button type="submit" class="llin"><img src="linkedin.png" width="50" height="50" alt="submit"/></button>
</form>
</div>
</div>
<!---TEXT PART-->
<div class="textcon">
<p>Hello,</p>
<p>I'm Ananya Makwana,</p>
<p>I am a senior senior at University of Wisconsin-Madison majoring in computer science and I'm actively looking for full-time Software Development positions starting May '21.</p>
<form method="get" action="ResumeAnanya.pdf">
<button class="downcv" type="submit">Download Resume</button>
</form>
</div>
<!---Picture-->
<div class="textcon">
<img src="png2.png" class="model" alt="model"></div>
</section>
<!---About-->
<div class="aboutcon" id="about">
<img src="improved.jpg" class="textwrap" alt="Avatar">
<div class="abouttext">
<p>About Me</p>
<p>Hello, my name is Ananya. I am an extremely enthusiastic person with an interest in Software Development. I have taken a broad range of courses as I am always eager to learn more. I love problem solving and I am also a very creative peron who likes
to design during my free time.</p>
</div>
</div>
Try Giving a z-index value to your nav.
z-index will place your nav in front of main body of your content.
Related
My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>
In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
All the other elements of the page seem to resize whenever i make the window smaller, but it seems like the "Contact Me" Button seems to disappear whenever i resize the page, I've been trying to fix this problem for a while by changing the position of the button by itself, but it seems like nothing I've been doing has fixed the problem yet. Any help would be awesome thanks!
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" type= "text/css" href="css/style.css">
<title>Jaylen Cooper</title>
<body>
<div class="image_one" id="main">
<img src="http://d2tovwv1y8kfyq.cloudfront.net/wp-content/uploads/2016/07/28105929/tech3.jpg" class="image_one">
<h1>Hello, My Name Is Jaylen Cooper, And I Develop Websites and User Interfaces</h1>
</div>
<div>
<button id="myBtn" class="myBtn" align="middle">Contact Me</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>CONTACT INFORMATION</h3>
<form>
<label for="Email">Email Address</label>
<input type="text" name="Email"/>
<label for="Info">Brief Information</label>
<input type="text" name="lName"/>
<input type="submit" value="SUBMIT">
</form>
</div>
</div>
<div class="nav_body">
<h2><b><center>My Preferences</center></b></h2>
</div>
<div>
<img src="http://pluspng.com/img-png/coder-png-source-code-icon-1600.png" height="150px" class="image_One">
<img src="https://png.icons8.com/metro/540/graduation-cap.png" height="100px" class="image_Two">
<img src="http://www.freeiconspng.com/uploads/brain-2.png" height="150px" class="image_Three">
</div>
<div class="text_display">
<p1 id="text"><b>CODE</b></p1>
</div>
<div class="third_text">
<p5 id="text2"><b><br> The Best Languages that I know right now are<br> HTML,CSS,JavaScript,<br> and a basic ammount of Python<br> and Java.</b></p5>
<p4 id="text2"><b><br> ⚋<br> I'm always looking to collaborate <br> with other developers on other project<br>If you know any other coding communities <br>Feel Free To Contact Me.</b></p4>
<p6 id="text2"><b><br> ⚋<br> The Ideas that I usually have<br> are Website Based and Mobile,<br> Want To Pursue SQL.</b></p6>
</div>
<div class="fourth_box">
<h7><b>WORK</b></h7>
</div>
<div class="fifth_box">
<img src="http://www.freepngimg.com/thumb/coming_soon/4-2-coming-soon-png-thumb.png" class="coming_soon">
</div class="third_text">
<div class="About_Me">
<h9><b><center>ABOUT ME</center></b></h9>
</div>
<div class="aboutme_box">
<p id="aboutme_text"><b>I Live In Dallas,Texas <br>⚋</b></p>
<p id="aboutme_text"><b>I'm 19 Years Old. <br>⚋</b></p>
<p id="aboutme_text"><b>I've Been Coding For A Year. <br>⚋</b></p>
<p id="aboutme_text"><b>Graduated High School In 2017. <br>⚋</b></p>
<p id="aboutme_text"><b>Attending Community College For Computer Science 2018.<br>⚋</b></p>
<p id="aboutme_text"><b>My Favorite Color Is Blue. <br>⚋</b></p>
<p id="aboutme_text"><b>I Love Watching Twitch On My Down Time. <br> ⚋</b></p>
<p id="aboutme_text"><b>If You Would Like To Know More About Me Shoot Me A Email.</b></p>
</div>
<div class="Hyperlink_images">
<a href="https://twitter.com/slitheirings">
<img src="http://www.freeiconspng.com/uploads/twitter-icon--basic-round-social-iconset--s-icons-0.png" class="hyperlink_one" width="100px" id="hyperlink" href="https://twitter.com/slitheirings">
</a>
<a href="https://www.instagram.com/coop2824">
<img src="http://www.freeiconspng.com/uploads/instagram-logo-icon--icon-search-engine-5.png" class="hyperlink_two" width="100px" id="hyperlink" href="https://www.instagram.com/coop2824/">
</a>
<a href="https://www.facebook.com/profile.php?id=100004979988388">
<img src="https://cdn.worldvectorlogo.com/logos/facebook-3.svg" class="hyperlink_three" width="100px" id="hyperlink" href="https://www.facebook.com/profile.php?id=100004979988388">
</a>
<a href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" width="100px" id="hyperlink" href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
</a>
<a href="https://github.com/Slitherings">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" width="100px" id="hyperlink" href="https://image.flaticon.com/icons/svg/25/25231.svg">
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/javascript_index.js"></script>
</body>
CSS
html, body{
margin: 0;
text-align: center;
top: 100%;
}
.nav_body{
height: 100px;
}
h1{
position: absolute;
font-family: sans-serif;
font-size: 52px;
text-align: center;
padding-left: 100px;
padding-right: 100px;
color: white;
top: 250px;
}
.image_one{
position:relative;
width: 100%;
height: 1080px;
opacity: 0.85;
}
.Contact_text{
color: white;
font-size: 24px;
top: 600px;
text-decoration: none;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 750px;
padding-top: 25px;
padding-bottom: 25px;
background-color: black;
opacity: 0.5;
transition-duration: 1s;
position: absolute;
}
.Contact_text:hover{
opacity: 1.0;
color: black;
background-color: white;
}
.Information_Text{
text-decoration: none;
color: white;
font-size: 16px;
position: absolute;
top: 710px;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 785px;
padding-top: 25px;
padding-bottom: 25px;
transition: 1s;
}
.Down_Arrow{
top: 750px;
position: absolute;
padding-left: 100px;
padding-right: 100px;
left: 490px;
}
.Main_Image{
position: absolute;
top: 70px;
padding-left: 100px;
padding-right: 100px;
left: 425px;
}
h2{
font-family: sans-serif;
font-size: 64px;
text-align: center;
}
.image_One{
padding-left: 20px;
padding-bottom: 50px;
}
.image_Two{
padding-left: 185px;
padding-bottom: 70px;
}
.image_Three{
padding-left: 170px;
top: 40px;
padding-bottom: 50px;
}
p1{
font-family:sans-serif;
text-decoration: none;
font-size: 64px;
color: white;
}
p2{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
p3{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
.text_display{
display: inline-block;
height: 55px;
padding-top: 25px;
background-color: cadetblue;
width: 100%;
text-align: center;
padding-bottom: 25px;
}
#text{
padding:200px;
}
.second_display{
height: 200px;
display: inline-block;
width: 100%;
}
p4{
font-family: sans-serif;
font-size: 14px;
left: 500px;
}
p5{
font-family: sans-serif;
font-size: 14px;
}
p6{
font-family: sans-serif;
font-size: 14px;
}
#text2{
}
.third_text{
display: inline-block;
padding-top: 50px;
padding-bottom: 50px;
}
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
height: 300px;
}
.prev, .next{
cursor: pointer;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8)
}
.text{
color:cadetblue;
font-size: 15px;
padding: 8px 12px;
bottom: 10px;
width: 100%;
text-align: center;
}
.numbertext{
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
top: 0;
}
.dot{
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display:inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
-webkit-animation-name:fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade{
from {opacity: .4}
to {opacity: 1.0}
}
#keyframes fade{
from{opacity: .4}
to {opacity: 1.0}
}
.fourth_box{
height: 85px;
background-color: cadetblue;
padding-bottom: 150px;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -400%;
}
100%{
left: -400%;
}
}
#slider{
overflow: hidden;
max-width: 600px;
width: auto;
left: 3500px;
position: fixed;
}
#slider figure img{
width: 20%;
float: left;
}
#slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
h7{
font-size: 64px;
font-family: sans-serif;
color: white;
left: 0;
position: relative;
top: 100px;
}
.contact_background{
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
top: 0;
}
.About_Me{
padding-top: 50px;
height: 100px;
background-color: cadetblue;
}
h9{
font-family: sans-serif;
font-size: 64px;
text-align: center;
color: white;
}
h10{
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
.submit_button{
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.clicktoclose{
font-family: sans-serif;
font-size: 16px;
color: white;
text-decoration: none;
}
.coming_soon{
text-align: center;
left: 500px;
}
.fifth_box{
padding-top: 100px;
padding-bottom: 100px;
}
#aboutme_text{
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
}
.aboutme_box{
padding-top: 50px;
padding-bottom: 50px;
}
.Hyperlink_images{
height: 200px;
background-color: cadetblue;
padding:100px;
}
#hyperlink{
padding:100px;
}
.Email_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.Category_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.myBtn{
transition:background-color 1.5s ease;
position: absolute;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
left: 850px;
}
a{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 15px;
}
.myBtn:hover{
background: cadetblue;
}
/* The Modal (background) */
.modal {
transition:background-color 1.5s ease;
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
input[type=text] {
transition:background-color 1.5s ease;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
font-family: sans-serif;
}
input[type=text]:focus {
background-color: coral;
opacity: 0.5;
}
label{
font-family: sans-serif;
font-weight: bold;
font-size: 26px;
}
h3{
font-family: sans-serif;
font-weight: bold;
font-size: 48px;
color: coral;
opacity: 0.4
}
input[type=button], input[type=submit], input[type=reset] {
transition:background-color 1.5s ease;
background-color: cadetblue;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
input[type=button], input[type=submit], input[type=reset]:hover{
background-color: coral;
opacity: 0.5;
font-family: sans-serif;
font-weight: bold;
}
Javascript
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var myopacity = 0;
function MyFadeFunction() {
if (myopacity<1) {
myopacity += .075;
setTimeout(function(){MyFadeFunction()},100);
}
document.getElementById('myModal').style.opacity = myopacity;
}
MyFadeFunction();
JSFiddle
Click if you want to see in browser
Again, any help would be great and it would really help me in the development of my portfolio website, I've been stuck on this problem for a while now. Thanks!
Nevermind, figured out the answer by readings Ben Kolya Mansleys, and Sergiu Post.
Thank you both for the help.
For Anyone That is wondering what i did
.myBtn{
transition:background-color 1.5s ease;
position: relative;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
align-items: center;
justify-content: center;
}
HTML
<div style="width:100%; height: 100%">
<button id="myBtn" class="myBtn" align="middle"><a href="#">Contact
Me</a></button>
</div>
Simply put the button inside a div then and styled it with width and height, and added align-items and justify-content centered in CSS.
Again Thanks Ben and Sergiu!
You are pushing the button off of the page with this:
.myBtn {
left: 850px;
}
You could try changing that line to something like this (adjust as necessary):
left: calc(110px + 8em);
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;*/
}
I have two input tags within my html but it doesn't allow me to input anything within them. I have no idea what it could be the values of the input when you click on them aren't clickable. If you would paste my code into your IDE or whatever you use try to replicate my issue. Nothing is able to input into the values I am not sure if it has to do with some of the css I have implemented or what.
body {
margin: 0;
padding: 0;
}
#box1 {
height: 100vh;
width: 100%;
background-image: url(http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-coffee-cup-glasses-macbook.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#backgroundnav {
/*background-color: #ADD8E6;*/
background-color: #989898;
height: 50px;
margin-top: -15px;
padding: 30px;
}
#content {
height: 600px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: white;
text-decoration: none;
cursor: pointer;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
#content h1 {
font-family: 'Cabin';
font-size: 50px;
font-weight: bold;
margin-top: -10px;
color: black;
}
#content p {
font-size: 20px;
}
img {
text-align: center;
}
#left {
height: 450px;
width: 50%;
background-color: #989898;
float: left;
display: table-cell;
position: relative;
bottom: 130px;
font-size: 30px;
}
#right {
float: right;
height: 450px;
width: 50%;
background-color: #D2B48C;
display: table-cell;
position: relative;
bottom: 130px;
font-family: 'Raleway';
font-size: 30px;
}
#middle {
height: 80%;
}
ol li {
font-size: 40px;
color: white;
}
hr {
width: 115px;
color: #989898;
}
h1 {
font-size: 50px;
color: white;
vertical-align: middle;
font-family: 'Raleway';
text-align: center;
}
#wrap {
position: relative;
top: 250px;
}
#about h1 {
text-align: center;
position: relative;
top: 50px;
font-family: 'Raleway';
color: steelblue;
}
#aboutleft {
padding: 20px;
line-height: 25px;
margin-left: 400px;
margin-right: 400px;
position: relative;
right: 350px;
top: 20px;
font-family: 'Open Sans';
}
#aboutright {
padding: 20px;
line-height: 25px;
margin-left: 400px;
margin-right: 400px;
position: relative;
left: 350px;
bottom: 285px;
font-family: 'Open Sans';
}
#hr1 {
position: relative;
top: 20px;
width: 200px;
}
#projects h1 {
color: black;
}
#projects {
background-color: #99C4D2;
height: 1300px;
}
.align {
position: relative;
left: 129px;
bottom: 50px;
}
figure {
float: left;
width: 500px;
padding-bottom: 10px;
background-color: #EAEAEA;
}
figcaption {
text-align: center;
font-style: italic;
font-family: serif;
}
#projects h1 {
position: relative;
bottom: 70px;
}
#contact {
background-color: steelblue;
height: 700px;
}
form {
padding: 20px;
position: relative;
left: 130px;
top: 110px;
}
label {
font-size: 20px;
font-family: 'Roboto Slab';
width: 50px;
padding: 20px;
}
input {
height: 20px;
width: 200px;
}
fieldset {
background-color: white;
width: 75%;
padding: 25px;
margin-bottom: 15px;
}
legend {
position: relative;
bottom: 20px;
right: 9px;
font-size: 24px;
text-transform: uppercase;
}
h2 {
text-align: center;
font-size: 40px;
}
<body>
<div id="backgroundnav">
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="box1">
<div id="wrap">
<h1>Peter Nguyen</h1>
<hr>
<h1>Web Developer</h1>
</div>
</div>
<div id="color">
<div id="content">
<section id="about">
<h1 id="about">About Me</h1>
<hr id="hr1">
<p id="aboutleft">My names Peter and learning how to code and persuing it in education was one of the best decisions I have made. When I am not at work coding and solving complex web application issues, I am at home learning the latest and greatest frameworks.
One of the best feelings is knowing that you solved an issue. I am extremly easy to get along with and easy to work with which would make me a great addition to any team. Web development is more than just a hobby and career path for me its a
passion and a way for me to get creative and think outside of the box!
</p>
<p id="aboutright">What else do I do besides code? I enjoy barbequing, lifting weights, being outdoors. I am also secretely a nerd so I enjoy playing video games, and reading books. Did I also mention that I enjoy playing ping pong? I was born in California and
lated move out to Arizona as a young kid growing up. As a kid I had a very high interest in computers and always wondered about the person who created every component a computer has. I beilive that is why to this day I am so intrigued by development.
</p>
</section>
</div>
<div id="left">
<h1>Place holder content for future case projects</h1>
<input type="text" id="case1">
<input type="text" id="case1x">
</div>
<div id="right">
<h1>Place holcer content for future case projects</h1>
<input type="number" name="">
</div>
</div>
<div id="projects">
<h1>Projects</h1>
<figure id="link" class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Guessing game created with JavaScript
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay kayak
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay Waterfalls
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay Cave
</figcaption>
</figure>
</div>
Your problem is differently in css. Open your page in browser then try to inspect input box - you will see that it overlapped by h1 tag. So fix the sizing of h1 -and you will get your input work.
You are making your H1 position relative. In fact, you have a lot of excess relative positioning going on in your CSS. The H1 tag is huge and overlapping most of your page
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>