Related
I’m trying to load a form modal using various buttons. I’ll be using my previous “Order Your Food” code as a simplified example and I’ve added the form and narrowed it down to just a first and last name fields and a simple mailto action for validation purposes. I've tried to simply this as much as possible so I apologize if there are any unneeded fragments of code that I may have missed and are not relevant.
If you click one of the button options, the form does load. If you fill in the two fields and hit submit, the form validates and prompts you to send an email to test#testingandrewsforms.com for the purpose of this demo so we’re not concerning ourselves with all of the post-submission client-to-server stuff.
What I’m trying to accomplish is the following:
User clicks Submit, form closes using the same CSS transition that was opened to begin with
-> Post submission form opens using the CSS transitions assigned to it
I’ve added “Show Form” and “Show Post” buttons so you can see how each modal is intended to operate independently. My theory is that there’s probably a way to use my closeBtn in javascript or JQuery to close the form on validated submission and then trigger opening the post-form modal. These windows are just being powered by href links that are assigned the form and post-form modal ids and the close button is simply removing those ids and just leaving the #. So far I’ve tried combinations of jquery click events and trigger events but neither seem to be doing anything.
I don’t think I can target the CSS attribute visibility which is used to hide the modals in jquery because they’re hidden by default and as far as I can tell from the browser inspector they’re not adding the attribute as an inline style so I don’t think I can remove it like that. I think that may be because I’m using the target selector to power the transition.
Any thoughts on how I might be able to accomplish this? I’m open to any methods, pure CSS, JS, Jquery, whatever works because so far nothing I’ve tried has worked for me. I've searched SO and there are several posts on trigger events but none seem to be related to doing so with modals linked via hrefs.
let foodHeaderText = document.getElementById('foodHeaderText');
const orderBtn = document.getElementsByClassName('orderBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
for (let order = 0; order < orderBtn.length; order++) {
orderBtn[order].addEventListener('click', function(event) {
foodHeaderText.innerHTML = event.target.attributes["value"]["value"];
})
}
for (let close = 0; close < closeBtn.length; close++) {
closeBtn[close].addEventListener('click', function(event) {
foodHeaderText.innerHTML = "Food";
contactFormInput.reset();
})
}
//validate and display post modal
$(document).ready(function () {
$("#contactForm").submit(function (e) {
$("#closeFormButton").trigger("click");
$("#formPost").show();
});
});
*,
*::before,
*::after {
box-sizing: border-box !important;
}
html {
font-size: 100% !important;
}
.foodHeader {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: black;
font-size: 3rem;
margin: 0 auto;
}
.btnContainer {
display: flex;
flex-direction: row;
}
.orderBtn {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: white;
width: 200px;
height: 50px;
margin: 0 auto;
background-color: red;
font-size: 0.8rem;
padding: 10px 10px;
line-height: 2rem;
text-decoration: none !important;
outline: 1px solid black;
}
.closeBtnContainer {
display: block;
margin: 20px auto;
text-align: center;
}
.contactFormModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateY(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.contactFormModal:target {
visibility: visible;
z-index: 2;
transform: translateY(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.closeBtn {
display: inline-block;
position: absolute;
right: 1rem;
top: 0.95rem;
width: auto;
height: auto;
user-select: none;
cursor: pointer;
margin: 0 auto;
}
.fa-window-close {
color: #646464;
transition: color 0.2s linear;
}
.fa-window-close:hover,
.fa-window-close:focus {
color: black;
transition: color 0.2s linear;
}
.orderFormHeader {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: block;
font-weight: bold;
text-align: center;
color: black;
font-size: clamp(2.2em, 3vw, 2.2em);
margin: 0rem auto;
padding: 0.7rem 0rem 0rem 0rem;
line-height: 1.3em;
letter-spacing: -0.02em;
}
.orderFormLineBreaker {
margin: 0em auto 0.5em auto;
display: block;
border: none;
color: white;
height: 1px;
background: black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 190, from(#000), to(#FAFAFA));
}
.orderFormContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.footerContainer {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.5rem auto;
}
.submitBtnNoSelect {
user-select: none;
}
.submitBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 7rem;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0rem 0.1rem 0.5rem;
margin: 0rem 1rem 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.contactFormContainer {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.orderPageRow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
padding: 0.5rem 1rem 0rem 1rem;
}
.orderPageRow:first-child {
padding-top: 1rem;
}
.orderPageColumn {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
margin: 0 auto;
text-align: left;
}
.contactFieldNames {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
color: #646464;
background-color: transparent;
padding: 0rem 0rem 0rem 0rem;
margin: 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1rem;
word-spacing: normal;
}
.formInput {
height: 100%;
width: 246px;
padding: 10px;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
font-size: 1rem;
}
.requiredAsterisk {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
font-size: 1em;
}
.disclosureText {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 400;
line-height: 1.2em;
font-size: 0.7em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem 0.85rem 1rem;
}
.commentsInput {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
background-color: white;
font-size: 1rem;
resize: vertical;
overflow: auto;
overflow-wrap: break-word;
min-height: 82px;
width: 246px;
line-height: 20px;
padding: 10px;
border: 1px solid #767676;
border-radius: 2px;
}
/* begin form post modal */
.formPostContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.formPostModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateX(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.formPostModal:target {
visibility: visible;
z-index: 2;
transform: translateX(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formPostWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.formPostConfirmationText {
position: relative;
display: block;
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
line-height: 1.2em;
font-size: 1.6em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem;
}
.homeBtnNoSelect {
user-select: none;
}
.homeBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 35%;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0.5rem 0.1rem 0rem;
margin: 0.5rem auto 0rem auto;
text-align: center;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.formPostFooter {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5rem auto;
}
/* end form post modal */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foodHeader">Order Your Food</div>
<div class="btnContainer">
<a class="orderBtn" href="#contactForm" name="foodItem" value="Cheeseburger">Order Your Cheeseburger</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Salad" style="background-color: green">Order Your Salad</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Sub" style="background-color: blue">Order Your Sub</a>
</div>
<a class="testBtn" href="#contactForm">
Sign Up
</a>
<a class="formSubmitPostTest" href="#formPost">
Post Form
</a>
<!-- contact form -->
<div class="contactFormModal" id="contactForm">
<form class="formWrapper" action="mailto:test#testingandrewsforms.com" method="post" enctype="text/plain" id="contactFormInput">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Order Your <div id="foodHeaderText">Food</div>
</div>
<div class="orderFormLineBreaker"></div>
<div class="orderFormContainer">
<div class="contactFormContainer">
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
First Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="firstName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
Last Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="lastName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
</div>
<div class="footerContainer">
<div id="burtonLogoOrderForm"></div>
<button class="submitBtn submitBtnNoSelect" id="submitFormBtn" type="submit" name="submit">Submit
</button>
</div>
<p class="disclosureText">Bottom text
</p>
</div>
</form>
</div>
<div class="formPostModal" id="formPost">
<div class="formPostWrapper">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Thank You!</div>
<div class="orderFormLineBreaker"></div>
<div class="formPostContainer">
<p class="formPostConfirmationText">We've received your request and will be in
touch soon!
</p>
<div class="formPostFooter">
<div id="burtonLogoPostForm"></div>
<div class="homeBtn homeBtnNoSelect">
Return Home
</div>
</div>
</div>
</div>
</div>
</body>
The form validation doesn't seem to trigger in Chrome so here's a jsfiddle that seems to work fine in Firefox (security settings I'm guessing?) https://jsfiddle.net/astombaugh/kf2vgq0p/678/
Bonus crude illustration just in case my explanation isn't sufficient:
I managed to come up with a solution by using the onsubmit event in JS. Since my form's validation is powered by HTML5 I needed some way of performing both the actions I desired in my original post but do so on a valid form submission and not just by clicking the submit button.
So, I removed the :target: selectors from my CSS and changed the classes to contactFormModalVisible and formPostModalVisible, and used javascript's classList to add and remove those classes as needed. Then I built an onsubmit event that only fires on a valid form submission from the HTML structure. It seems to work but I'll have to check it once I've gotten to the part where I'm actually sending information. If there's anything about this answer that could be improved please feel free to share.
let foodHeaderText = document.getElementById('foodHeaderText');
let contactForm = document.getElementById('contactForm');
let postForm = document.getElementById('formPost')
const orderBtn = document.getElementsByClassName('orderBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
const submitBtn = document.getElementsByClassName('submitBtn');
for (let order = 0; order < orderBtn.length; order++) {
orderBtn[order].addEventListener('click', function(event) {
foodHeaderText.innerHTML = event.target.attributes['value']['value'];
contactForm.classList.add('contactFormModalVisible');
})
}
for (let close = 0; close < closeBtn.length; close++) {
closeBtn[close].addEventListener('click', function(event) {
foodHeaderText.innerHTML = 'Food';
contactForm.classList.remove('contactFormModalVisible');
postForm.classList.remove('formPostModalVisible');
contactFormInput.reset();
})
}
for (let submit = 0; submit < submitBtn.length; submit++) {
submitBtn[submit].addEventListener('click', function(event) {
contactForm.onsubmit = (e) => {
contactForm.classList.remove('contactFormModalVisible');
postForm.classList.add('formPostModalVisible');
e.preventDefault();
}
})
}
*,
*::before,
*::after {
box-sizing: border-box !important;
}
html {
font-size: 100% !important;
}
.foodHeader {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: black;
font-size: 3rem;
margin: 0 auto;
}
.btnContainer {
display: flex;
flex-direction: row;
}
.orderBtn {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: white;
width: 200px;
height: 50px;
margin: 0 auto;
background-color: red;
font-size: 0.8rem;
padding: 10px 10px;
line-height: 2rem;
text-decoration: none !important;
outline: 1px solid black;
}
.closeBtnContainer {
display: block;
margin: 20px auto;
text-align: center;
}
.contactFormModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateY(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.contactFormModalVisible {
visibility: visible;
z-index: 2;
transform: translateY(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.closeBtn {
display: inline-block;
position: absolute;
right: 1rem;
top: 0.95rem;
width: auto;
height: auto;
user-select: none;
cursor: pointer;
margin: 0 auto;
}
.fa-window-close {
color: #646464;
transition: color 0.2s linear;
}
.fa-window-close:hover,
.fa-window-close:focus {
color: black;
transition: color 0.2s linear;
}
.orderFormHeader {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: block;
font-weight: bold;
text-align: center;
color: black;
font-size: clamp(2.2em, 3vw, 2.2em);
margin: 0rem auto;
padding: 0.7rem 0rem 0rem 0rem;
line-height: 1.3em;
letter-spacing: -0.02em;
}
.orderFormLineBreaker {
margin: 0em auto 0.5em auto;
display: block;
border: none;
color: white;
height: 1px;
background: black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 190, from(#000), to(#FAFAFA));
}
.orderFormContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.footerContainer {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.5rem auto;
}
.submitBtnNoSelect {
user-select: none;
}
.submitBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 7rem;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0rem 0.1rem 0.5rem;
margin: 0rem 1rem 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.contactFormContainer {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.orderPageRow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
padding: 0.5rem 1rem 0rem 1rem;
}
.orderPageRow:first-child {
padding-top: 1rem;
}
.orderPageColumn {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
margin: 0 auto;
text-align: left;
}
.contactFieldNames {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
color: #646464;
background-color: transparent;
padding: 0rem 0rem 0rem 0rem;
margin: 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1rem;
word-spacing: normal;
}
.formInput {
height: 100%;
width: 246px;
padding: 10px;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
font-size: 1rem;
}
.requiredAsterisk {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
font-size: 1em;
}
.disclosureText {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 400;
line-height: 1.2em;
font-size: 0.7em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem 0.85rem 1rem;
}
.commentsInput {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
background-color: white;
font-size: 1rem;
resize: vertical;
overflow: auto;
overflow-wrap: break-word;
min-height: 82px;
width: 246px;
line-height: 20px;
padding: 10px;
border: 1px solid #767676;
border-radius: 2px;
}
/* begin form post modal */
.formPostContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.formPostModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateX(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.formPostModalVisible {
visibility: visible;
z-index: 2;
transform: translateX(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formPostWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.formPostConfirmationText {
position: relative;
display: block;
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
line-height: 1.2em;
font-size: 1.6em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem;
}
.homeBtnNoSelect {
user-select: none;
}
.homeBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 35%;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0.5rem 0.1rem 0rem;
margin: 0.5rem auto 0rem auto;
text-align: center;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.formPostFooter {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5rem auto;
}
/* end form post modal */
<body>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foodHeader">Order Your Food</div>
<div class="btnContainer">
<a class="orderBtn" href="#contactForm" name="foodItem" value="Cheeseburger">Order Your Cheeseburger</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Salad" style="background-color: green">Order Your Salad</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Sub" style="background-color: blue">Order Your Sub</a>
</div>
<a class="testBtn" href="#contactForm">
Sign Up
</a>
<a class="formSubmitPostTest" href="#formPost">
Post Form
</a>
<!-- contact form -->
<div class="contactFormModal" id="contactForm">
<form class="formWrapper" action="mailto:test#testingandrewsforms.com" method="post" enctype="text/plain" id="contactFormInput">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Order Your <div id="foodHeaderText">Food</div>
</div>
<div class="orderFormLineBreaker"></div>
<div class="orderFormContainer">
<div class="contactFormContainer">
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
First Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="firstName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
Last Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="lastName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
</div>
<div class="footerContainer">
<div id="burtonLogoOrderForm"></div>
<button class="submitBtn submitBtnNoSelect" id="submitFormBtn" type="submit" name="submit">Submit
</button>
</div>
<p class="disclosureText">Bottom text
</p>
</div>
</form>
</div>
<div class="formPostModal" id="formPost">
<div class="formPostWrapper">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Thank You!</div>
<div class="orderFormLineBreaker"></div>
<div class="formPostContainer">
<p class="formPostConfirmationText">We've received your request and will be in
touch soon!
</p>
<div class="formPostFooter">
<div class="homeBtn homeBtnNoSelect">
Return Home
</div>
</div>
</div>
</div>
</div>
</body>
I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.
From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox
I have a CTA that slides out when you hover over it. The problem I have is that the text is sometimes hard to read depending on the background colour. I've created a demo of what I'm trying to achieve, you can check it out here:
Demo on CodePen
The essence of this demo is:
HTML:
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
</div>
<div class="at-about-fab__meta">
<h2>Call Us Now</h2>
<p>555 555 5555</p>
</div>
</div>
The CSS looks like this:
.at-about-fab {
z-index: 999999;
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
flex-direction: row;
transform: translateX(100%);
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
transform: translateY(-50%);
}
&:hover {
transform: translateX(0%);
.at-about-fab__meta {
opacity: 1;
}
}
&__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
box-sizing: border-box;
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
img {
display: block;
width: 100%;
border-radius: 100%;
}
}
&__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
transition: 0.2s ease;
h2,
p {
margin: 0;
padding: 0;
}
h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
p {
color: #CCCCCC;
font-size: 12px;
font-weight: 400;
}
a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
}
}
Any suggestions on how to get this right? I've looked at a few JavaScript-based examples but my JavaScript skills aren't there yet...
Many thanks
You can try something like this:
Idea
Add mouseover event on main container.
In this handler, have a variable that will hold classname that is to be added.
On hover:
Get all sections.
Check the bounds of current section with icon's bound.
If top of icon is greater than top of section, update the className variable
If not, break the loop.
Now remove all classes add className to container. You will also have to write corresponding classes in CSS as well.
Sample: Updated CodePen
var iconContainer = document.querySelector('.at-about-fab');
iconContainer.addEventListener('mouseover', function () {
var bounds = this.getBoundingClientRect();
var sections = document.querySelectorAll('.section');
var className = '';
Array.from(sections).some(function(el) {
var currentBounds = el.getBoundingClientRect();
if(bounds.top > currentBounds.top) {
className = el.getAttribute('id');
}
else {
return true;
}
});
this.classList.remove('section1', 'section2', 'section3', 'section4');
this.classList.add(className);
})
It is not advisable to share offsite links that might be erased however this is a good start. 7 Practical Tips for Cheating at Design
Summary has been done in the comments to the CSS.
.at-about-fab {
z-index: 999999;
position: fixed;
/*Dropped the right to hide the text block a little more - you can ignore*/
right: 0px;
bottom: 20px;
/*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
background-color: white;
padding: 5px 20px;
display: flex;
align-items: center;
flex-direction: row;
transform: translateX(100%);
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
transform: translateY(-50%);
}
&:hover {
transform: translateX(0%);
.at-about-fab__meta {
opacity: 1;
}
}
&__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
box-sizing: border-box;
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
img {
display: block;
width: 100%;
border-radius: 100%;
}
}
&__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
transition: 0.2s ease;
h2,
p {
margin: 0;
padding: 0;
}
h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
p {
/*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
color: #999;
font-size: 12px;
font-weight: 400;
}
a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
}
}
/* Just for the sake of testing */
.content{
position:relative;
}
#wrapper
{
position:relative;
}
.section
{
width: 100%;
text-align:center;
padding:250px 0;
border:1px solid #666;
}
#section1
{
background: #fff;
}
#section2
{
background: #000;
color:#fff;
}
#section3
{
background: #444444;
}
#section4
{
background: #BA2322;
}
Codepen Demo
You could use mix-blend-mode: exclusion; with the help from data attribute and ::after selector:
.at-about-fab {
z-index: 999999;
position: fixed;
right: 20px;
bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.at-about-fab:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.at-about-fab:hover {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.at-about-fab:hover .at-about-fab__meta {
opacity: 1;
}
.at-about-fab__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
}
.at-about-fab__thumbnail img {
display: block;
width: 100%;
border-radius: 100%;
}
.at-about-fab__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
margin: 0;
padding: 0;
}
.at-about-fab__meta h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
.at-about-fab__meta p {
color: #CCCCCC;
font-size: 12px;
font-weight: 400;
}
.at-about-fab__meta a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
/* Just for the sake of testing */
.content {
position: relative;
}
#wrapper {
position: relative;
}
.section {
width: 100%;
text-align: center;
padding: 250px 0;
border: 1px solid #666;
position: relative;
color: black;
}
.section:after {
content: attr(data-content);
position: absolute;
width: 100%;
height: auto;
text-align: center;
top: 50%;
left: 0;
mix-blend-mode: exclusion;
color: white;
}
#section1 {
background: #fff;
}
#section2 {
background: #000;
}
#section3 {
background: #444444;
}
#section4 {
background: #BA2322;
}
<!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
</div>
<div class="at-about-fab__meta">
<h2>Call Us Now</h2>
<p>555 555 5555</p>
</div>
</div>
<!-- Just for the sake of testing -->
<div class="content">
<div id="wrapper">
<div class="section" id="section1" data-content="section1"></div>
<div class="section" id="section2" data-content="section2"></div>
<div class="section" id="section3" data-content="section3"></div>
<div class="section" id="section4" data-content="section4"></div>
</div>
</div>
Here is also a link to the updated codepen with SCSS.
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 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