So I have been searching to find a way to change the color of the bottom border of my navigation bar links with a linear animation starting from the bottom going upwards. I was able to find a thread with some code that I semi-understand, just a few CSS lines which has sent me in the right direction, however the colour change is animated from the top down, whereas I would like the opposite.
I am using Bootstrap if that makes any different, is there any way I can do the opposite and have the transition start from the bottom and go upwards? My code is posted below...
* {
box-sizing: border-box;
}
body {}
#header-nav {
background-color: #262626;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
border-bottom: #212121 thick solid;
}
#header-nav .container {
padding-top: 10px;
padding-bottom: 10px;
/* border-bottom: purple thick solid;*/
margin: 0px;
}
/*212121*/
#header-nav a {
color: #FFF;
margin-right: 2rem;
padding: 10px;
/* border-bottom: purple thick solid; */
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#header-nav a:hover {
text-decoration: none;
/* background-color: purple;*/
border-bottom: white thick solid;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar-nav ml-auto">
<div class="container">
<a class="active" href="#"><i class="fas fa-home"></i> Home</a>
<i class="fas fa-question"></i> About
<i class="fas fa-book"></i> Rules
<i class="fas fa-vote-yea"></i> Vote
<i class="fas fa-tags"></i> Store
</div>
</nav>
</header>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Use gradient for this:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px; /* control the space for the gradient */
background:
linear-gradient(currentColor,currentColor)
bottom /* make it bottom */
/100% 0px /*start at heght = 0; */
no-repeat;
transition:0.3s all;
}
a:hover {
background-size:100% 6px; /* make the height 6px*/
}
<div class="box">
a link
</div>
Another syntax where you adjust the position instead:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px;
background:
linear-gradient(currentColor,currentColor)
left 0 bottom -7px
/100% 6px
no-repeat;
transition:0.3s all;
}
a:hover {
background-position:left 0 bottom 0;
}
<div class="box">
a link
</div>
Related
When my web page loads it plays this bottom border animation, then afterwords it will display a static bottom border. The issue is, you can see from this snippet that the animated border is shorter than the static border.. How can I center this so both borders are identical at the end result? I would ideally like both borders to look like the second, longer one shown in the snippet.
I have played around with the width but can't seem to figure out what parameter needs a change.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
you can add a position:relative to the container, and set its after pseudo-element’s pasition to absolute and left to 0, so that it’ll start right from the beginning of its container.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.container{
position:relative;
}
.border-bottom-animate:after {
content: "";
position:absolute;
left:0;
display: block;
border-bottom: 5px dotted black;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
The :after pseudo-element is only as wide as the content inside the padding. You need to add the size of the padding to your :after's width. Then adjust the margin to account for the greater width. Bootstrap uses calc(var(--bs-gutter-x) * .5) to define the padding-left and padding-right of a .container.
See my comments in the snippet CSS below. I minimalized the snippet but, there are only 2 lines with a change plus 2 comment lines from your code.
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
/* add the bootstrap gutter width */
width: calc(var(--bs-gutter-x) + 100%);
animation-duration: 3s;
animation-name: border-animation;
/* give a negative x margin half the gutter width */
margin: 0 calc(var(--bs-gutter-x) * -.5);
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: calc(var(--bs-gutter-x) + 100%);
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
I already did a circle with my input of type color I need that circle to be inside of another one, I already tried out with some things but doesn't work with an input, I would like to know how can I do that?
The circle its actually inside of the other one the thing it's you can't actually see it, how can I solve this?
This is how it should looks like: https://www.screencast.com/t/0Xw9Sv4NDgqT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
<style>
input[type="color"] {
opacity: 0;
display: block;
width: 22px;
height: 22px;
border: none;
border-radius: 50% !important;
position: relative;
}
#color-picker-wrapper {
width: fit-content;
height: fit-content;
border-radius: 50% !important;
position: relative;
}
.pick-color{
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2 ;
}
.outer {
background-color:white;
width:2rem; /* You can define it by % also */
height:2rem; /* You can define it by % also */
position:relative;
border:2px solid #A2A2A2 ;
border-radius: 50%;
}
.inner {
top: 25%; left:25%; /* of the container */
width:50%; /* of the container */
height:50%; /* of the container */
border:1px solid black;
border-radius: 50%;
opacity: 0;
}
</style>
</head>
<body>
<!--<div id="wrapper" style="text-align: center;">
<input type="text" id="hex">
<input type="color" id="color">
</div>-->
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
<div class="outer circle shapeborder">
<input type="color" class="inner">
</div>
</div>
<!--This is for testing, this change the background of the body and set the color HEX to the input-->
<script>
/*let inputColor = document.querySelector('#color');
let inputHex = document.querySelector('#hex');
let borderColor = document.getElementById('color');
let colorWrapper = document.getElementById('wrapper');
colorWrapper.style.backgroundColor = borderColor.value;
inputColor.addEventListener('input', () => {
let color = inputColor.value;
inputHex.value = color;
document.body.style.backgroundColor = color;
});*/
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
</script>
</body>
</html>
The idea here is that you will have:
An outermost div (#color-picker-container): responsible for the outer border.
An inner div (#color-picker-wrapper) a little bit smaller: responsible for presenting the picked color.
An innermost input (#color-picker): set opacity:0 to be hidden away
const color_picker = document.getElementById("color-picker");
const color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
opacity: 0;
}
#color-picker-container {
border-radius: 50%;
border: 2px solid #A2A2A2;
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
#color-picker-wrapper {
border-radius: 50%;
width: 80%;
height: 80%;
}
.pick-color {
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
</head>
<body>
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-container">
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
html, body{
box-sizing:border-box;
height: 100vh;
}
body{
color:white;
height: 100%;
min-width: 100%;
background: url("images/friends.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.container{
height: 100%;
width: 100%;
}
.container2{
width:80%;
margin:auto;
text-align:center;
}
header{
padding:1em;
margin: 0;
}
/*navigation styling*/
#navbar{
display: flex;
justify-content: space-between;
}
#navbar ul{
display:flex;
align-items:center;
list-style:none;
}
#navbar ul li a{
text-decoration:none;
padding:.75rem;
}
header nav li a:hover{
color:red;
transition:.75s;
}
/*login modal styling*/
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
left:0;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
display: none;
}
#login-content{
height:80%;
width:25%;
position:relative;
background-color:red;
border-radius:2%;
display:flex;
flex-direction: column;
justify-content:center;
text-align:center;
}
.close{
position:absolute;
top:0;
right:5%;
cursor:pointer;
font-size: 30px;
}
.login-input{
display:block;
margin: 0 auto 1.5rem auto;
padding:.5rem;
border: 2px solid black;
border-radius:24px;
}
#login-logo{
height:6rem;
width:6rem;
margin-bottom: 2rem;;
}
.agreement{
margin:1.5rem 1rem;
}
/*remove border on inputs, etc.*/
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.button{
width: 6rem;
height: 2.5rem;
color: red;
background-color:white;
border-radius:24px;
border:none;
cursor:pointer;
}
.button:hover{
color:white;
background-color: #861111;
transition:.75s;
}
a{
color:white;
}
/*main description of site for homepage*/
.maindescription{
margin:2rem;
}
.description-header{
font-size:4rem;
margin-bottom:.5rem;
}
.description{
margin-bottom: .75rem;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16"
href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div id="branding">
<a href="indexresolve.html"><img src="images/lasttry.png"
alt="resolvelogo"></a>
</div>
<ul>
<li><a href="indexresolve.html"Home></a></li>
<li><a class="current" href="howitworks.html">How It
Works</a></li>
<li>Contact</li>
<li>FAQ</li>
<li><button id="login" class="button">Log In</button>
</li>
</ul>
</nav>
<!-- Login Modal -->
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<div>
<img id="login-logo"
src="images\free_horizontal_on_white_by_logaster.jpg">
</div>
<form>
<input class ="login-input" type="text"
placeholder="username" >
<input class ="login-input" type="password"
placeholder="password">
<button class="button" id="modalbutton">Log
In</button>
</form>
<p class="agreement">By clicking log in, you agree
to our Terms, <a href="privacy.html">Privacy
Policy</a>, and
our Cookie Policy.</p>
<P><a href="forgotpasswords">Forgot Username or
Password?</a></P>
</div>
</div>
<!--End Login Modal-->
</nav>
</header>
<section>
<!--Guys-->
<div class="container2">
<div class="maindescription">
<h1 class="description-header">Guys</h1>
<h2 class="description">Resolve is the new way to improve
your dating life. Get real women's unbiased feedback on your
dating profiles, the way you dress, your body language,
conversational skills, and more. Real, actionable advice on how to become a
man
that women will desire.</h2>
<button class="button">Get Started</button>
</div>
<!--Ladies-->
<div class="maindescription">
<h1 class="description-header">Ladies</h1>
<h2 class="description">dhkjfdah jdhfakjh jhafdkjh kjhfdalkjf lkjafhd
fhkahuf kjeuud eeuiw udhakje huidhf aufhlahfa fuashfeudhfyus fuaifhdsh
khadf alufhaliufhalifhaf sf! </h2>
<button class="button">Get Started</button>
</div>
</div>
</section>
<script src="resolve.js"></script>
</body>
</html>
I want my background image to cover 100% of the browser window, I do not care if it is cropped. Right now at a certain size, it cuts off at the bottom. I tried putting the background image in the HTML selector in CSS instead of the body selector but that did not work. Overflow: hidden worked but it cut off the content as well.
Here is my jsfiddle :https://jsfiddle.net/benmikola66/vu6btxpw/3/
You could change body to:
body {
color:white;
height: 100%;
min-width: 100%;
background: url("https://i.postimg.cc/5tJtgDD1/friends.jpg") no-repeat center center fixed;
background-size: cover;
}
Here is the fiddle
I am using animate.css in order to animate text on page load. I am delaying the effects but it is showing the text then animating it see?
You can see the animation in action here: https://gyazo.com/a51b4248203c72cbf81012e7f7fad112.
If you need to closer to my HTML & CSS: https://hastebin.com/dawawecuvi.xml
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.logotext{
color: limegreen;
font-size: 34px;
font-family: 'Pacifico', cursive;
}
.navbar-default{
background-color: dimgrey !important;
box-shadow: 0px 5px 0px limegreen !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: white !important;
}
li{
font-size: 20px;
}
.navbar-right{
padding-right: 80px;
}
.hvr-sweep-to-top:before {
background: limegreen ;
}
.container-fluid {
padding: 0px;
}
.aboutmediv{
background-color: black;
height: 900px;
}
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
}
.navbar-fixed-top{
animation: slideInDown 1s;
animation-delay: 0.1s;
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Nydigov">
<meta name="description" content="Nydigovs portfolio site. Check out my recent work!">
<meta name="keywords" content="Fellex,Nydigov,NY,nydigov,fellex,fell,fellex.me,Fellex.me">
<link rel="shortcut icon" href="img/athyslogo.png">
<title>Nydigov</title>
<!--All links secure-->
<!--Latest compiled and minified CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Secure link to paper bootstrap theme -->
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css" integrity="sha384-I3UMl9KZhtYWd8htMkmvi+cG4KsfRMyoiX7O3teTUiqrP+34X3fuqYI5GUOC0N82" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous">
<!--FontAwesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--Hover CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" integrity="sha384-VTeRBIyCP1UOtJsYqkdWx9FnCcVTZlBzNKjt0R0FMPZUVvNmz2bflo5bg7kbZDU1" crossorigin="anonymous">
<!--Main Stylesheet-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><p class="logotext">Nydigov</p></a>
</div>
<ul class="nav navbar-nav pull-right navbar-right">
<li class="hvr-sweep-to-top">Home</li>
<li class="hvr-sweep-to-top">Past Work</li>
<li class="hvr-sweep-to-top">Contact</li>
</ul>
</div>
</nav>
<!--Content-->
<div class="container-fluid">
<!--Image-->
<div class="image">
<img src="images/imagebacktop.jpg" alt="" class="img-responsive mainimg">
<h2 class="imagetextbig">Hi, I'm Nydigov</h2>
<h2 class="imagetextbig imgtext2">And this is my site</h2>
</div>
<!--About Me-->
<div class="aboutmediv"></div>
</div>
</body>
</html>
Looking at your CSS, I presume these are the two elements we're talking about:
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
}
If you want them hidden at first and then to slide in from the sides of the page, you have two options. The first option is to change the CSS so they start off-screen and animate on-screen. But there isn't a plug-and-play solution for that where you can just use the animate.css animation out of the box and have it work.
So we can do the second option, which is to hide them as the page is loaded, then have them appear when the animation starts. Use visibility: hidden in your default styles for the elements to hide them when the page first loads.
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
visibility: hidden; /*add this*/
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
visibility: hidden; /*add this*/
}
Then, in the animation, we want to make sure they switch to visibility: visible, otherwise you'll be animating an invisible element.
If we go to the animate.css website and check their source code, we can see that the animation for slideInLeft looks like this:
#keyframes slideInLeft {
0% {
transform: translate3d(-100%,0,0);
visibility: visible;
}
to {
transform: translateZ(0);
}
}
In other words, setting the elements to visible at the start of the animation is already taken care of for you. So just adding visibility: hidden to the default styles at the start is all you need. The slideInRight animation is similar to the slideInLeft one: it also sets visibility: visible at its start. So nothing to worry about there either.
I downloaded foundation 6 "essential". Here: http://foundation.zurb.com/sites/download.html/
This download has an index.html file that is an entry into the example page.
I decided I wanted to integrate this module called "f6-top-bar" into the top of the example foundation index.html page:
http://zurb.com/building-blocks/f6-top-bar
To do this I did the following:
I copied the HTML code of "f6-top-bar" here:
http://zurb.com/building-blocks/f6-top-bar
into the index.html file of the foundation 6 download index.html page.
I then copied the CSS of "f6-top-bar" here:
http://zurb.com/building-blocks/f6-top-bar
into the app.css file of the foundation 6 index.html page
The end result was not a responsive menu with a hamburger style icon. It was simply a static unordered list.
What am I doing wrong ?
HTML
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
css/app.css
body {
margin-top: 2rem;
}
.title-bar {
background: #333;
padding: 0.9rem;
}
.top-bar {
background: #333;
}
.top-bar ul {
background: #333;
}
.top-bar ul li {
background: #333;
}
.top-bar ul li a {
color: #fff;
}
.menu-text {
color: #fff;
}
#media only screen and (max-width:40em) {
.menu-text {
display: none !important;
}
}
#media only screen and (min-width:40em) {
.menu:last-child {
border-left: 1px solid #4e4e4e;
}
.menu:first-child {
border-left: none;
}
.menu li:not(:last-child) {
border-right: 1px solid #4e4e4e;
}
}
.dropdown.menu .submenu {
border: none;
}
.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
border-color: #fff transparent transparent;
}
.is-drilldown-submenu-parent > a::after {
border-color: transparent transparent transparent #fff;
}
.js-drilldown-back::before {
border-color: transparent #fff transparent transparent;
}
End result :(
The answer is that this requires foundation "complete". Foundation "essential" will not work.