<div class="Navbar" id="nav">
<div class="nav-wrapper">
<div class="Navbar__Link Navbar__Link-brand">
Brand
</div>
<div class="Navbar__Link Navbar__Link-user txt-color1">
<i class="fas fa-user"></i>
</div>
<div class="Navbar__Link Navbar__Link-toggle" id="togglebutton">
<a href="javascript:void(0);" onclick="toggle_menu()">
<div class="bar1 bg-color1"></div>
<div class="bar2 bg-color1"></div>
<div class="bar3 bg-color1"></div>
</a>
</div>
<nav class="Navbar__Items site-navigation">
<div class="Navbar__Link txt-color0">
Home
</div>
<div class="Navbar__Link txt-color0">
Services
</div>
<div class="Navbar__Link txt-color0">
About
</div>
<div class="Navbar__Link txt-color0">
Contact
</div>
</nav>
<nav class="Navbar__Items Navbar__Items--right">
<div class="Navbar__Link Signup bg-color1">
<a>
<i class="fas fa-user"></i>
Try for Free
</a>
</div>
<div class="Navbar__Link buttonstyle2">
<i class="fas fa-sign-in-alt"></i>
Sign In
</div>
</nav>
</div>
</div>
<!-- overlay -->
<div id="myNav" class="overlay">
<div class="overlay-content">
<div class="searchContainer cf">
<input class="searchBox" type="search" name="search" placeholder="Search the site...">
<button type="submit" class="searchButton">Search</button>
</div>
<div class="link-container">
<div class="overlay-link">
<a><i class="fas fa-user"></i></a>
Login
</div>
<div class="overlay-link">
<a><i class="fas fa-home"></i></a>
Home
</div>
<div class="overlay-link">
<a><i class="fas fa-cogs"></i></a>
Service
</div>
<div class="overlay-link">
<a><i class="fas fa-info-circle"></i></a>
About
</div>
<div class="overlay-link">
<a><i class="fas fa-address-book"></i></a>
Contact
</div>
<div class="overlay-link">
<a><i class="fas fa-star"></i></a>
More
</div>
</div>
</div>
</div>
<p> It would be nice if the menu did not push this paragraph at all
<script src='https://use.fontawesome.com/releases/v5.0.6/js/all.js'></script> <!-- User Icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
body {
margin: 0;
font-family: 'Lora';
font-size: 1.1em;
background: #F7F5E6;
}
a {
color: inherit;
font-family: inherit;
font-size: inherit;
text-decoration: none;
font-size: 0.9em;
}
a:hoover {
text-decoration: none;
color: white;
}
a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: white;
}
/* http://paletton.com/export/index.php */
/* Text Color Classes */
.txt-color0 {
color: #333 !important;
}
.primary, .txt-color1 {
color: #4E6D9C !important;
}
.Secondary1, .txt-color2 {
color: #6155A4 !important;
}
.Secondary2, .txt-color3 {
color: #ECD26B !important;
}
.Complement1, .txt-color4 {
color: #ECBD6B !important;
/* Background Color Classes */
}
.bg-primary0, .bg-color0 {
background: linear-gradient(to top, #959595, #C0C0C0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-primary, .bg-color1 {
background: #4E6D9C !important;
}
.bg-Secondary1, .bg-color2 {
background: #6155A4 !important;
}
.bg-Secondary2, .bg-color3 {
background: #ECD26B !important;
}
.bg-Complement1, .bg-color4 {
background: #ECBD6B !important;
}
/* End */
.Navbar {
top: 0;
display: flex;
padding: 10px;
z-index: 2;
position: fixed; /* Stay in place */
z-index: 2; /* Sit on top */
width: 100%;
flex-direction: row;
border-top: 1px solid #a2a2a2;
background-color: #f4f4f4;
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
border-bottom: 1px dashed rgba(160,160,160,0.8);
box-shadow: 0px 4px 0px 0px rgba(237,237,237,1),
0px 5px 0px 0px rgba(160,160,160,1),
5px 0px 0px 0px rgba(160,160,160,1),
0px -1px 0px 0px rgba(160,160,160,1),
-1px 0px 0px 0px rgba(160,160,160,1),
0px 0px 0px 1px rgba(160,160,160,1),
0px 20px 15px -10px rgba(1,1,1,0.2);
}
.nav-wrapper {
margin: auto;
text-align: center;
width: 80%;
display: flex;
flex-wrap:wrap; /* Added this to allow wrapping */
justify-content: space-between;
}
.Navbar__Link-brand {
font-family: Lato, Helvetica, Arial, sans-serif;
text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
font-size: 2.2em;
letter-spacing: 1px;
color: rgba(78,109,156,1);
justify-content: center;
display: flex;
flex-direction: column;
}
.Navbar__Link {
padding-right: 10px ;
padding-left: 10px ;
letter-spacing: 1px;
line-height: 40px;
}
.Navbar__Items {
display: flex;
margin-left:auto;
}
/* Overlay Menu */
.Navbar__Items div {
font-size: 1.0em;
letter-spacing: 1.2px;
font-family: 'Oxygen' !important;
color: #212323;
}
.overlay {
height: 100%;
margin-top: 60px; /* Magic number */
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: -100%;
top: 0;
background-color: #f1f1f1;
overflow-x: hidden; /* Disable horizontal scroll */
transition: left 0.5s;
}
.overlayopen {
width: 100%;
height: 100%;
left: 0;
}
/* Position the content inside the overlay */
.overlay-content {
margin-top: 8px; /* Magic number */
position: relative;
width: 100%; /* 100% width */
color: #1E406E;
}
/* Search Container */
.searchContainer {
display: inline-flex;
justify-content: Center;
width: 96%;
margin-left: 2%;
margin-bottom: 20px;
position: relative;
flex-direction: row;
padding: 2px 5px;
overflow: hidden;
background:#f4f4f4;
background:rgba(244,244,244,.79);
border: 1px solid #d3d3d3;
box-shadow:0 4px 9px rgba(0,0,0,.37);
-moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
-webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.searchContainer input {
background:#fefefe;
border: none;
font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
margin-right: 5px;
padding: 10px;
width: 216px;
box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px
}
.searchContainer input:focus {
outline: none;
box-shadow:0 0 4px #0d76be inset;
-moz-box-shadow:0 0 4px #0d76be inset;
-webkit-box-shadow:0 0 4px #0d76be inset;
}
.searchContainer input::-webkit-input-placeholder {
font-style: italic;
line-height: 15px
}
.searchContainer input:-moz-placeholder {
font-style: italic;
line-height: 15px
}
.searchIcon {
padding: 15 15 15 15;
margin-right: 10px;
}
.searchBox {
border: 0;
padding: 0.5rem 0.5rem 0.5rem 0;
flex: 1;
}
.searchButton {
background: rgb(30,64,110);
border: none;
color:#fff;
cursor: pointer;
font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
padding: 10px;
width:106px;
box-shadow: 0 0 2px #2692dd inset;
-moz-box-shadow: 0 0 2px #2692dd inset;
-webkit-box-shadow: 0 0 2px #2692dd inset;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
/* END Search Container */
.link-container {
display: flex; /* or inline-flex */
flex-wrap: wrap;
justify-content: Center;
}
.overlay-link {
border: 1px solid #4E6D9C;
width: 32%;
height: 110px;
font-size: 14px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
line-height: 30px;
}
.overlay-link:hover {
background: #AABDDA;
}
.overlay-link a:hover {
color: #1E406E;
}
.overlay-link:nth-child(1) {
border-bottom: none;
border-top-left-radius: 5px;
}
.overlay-link:nth-child(2) {
border-left: none;
border-bottom: none;
}
.overlay-link:nth-child(3) {
border-left: none;
border-bottom: none;
border-top-right-radius: 5px;
}
.overlay-link:nth-child(4) {
border-bottom-left-radius: 5px;
}
.overlay-link:nth-child(5) {
border-left: none;
}
.overlay-link:nth-child(6) {
border-left: none;
border-bottom-right-radius: 5px;
}
/* The navigation links inside the overlay */
.overlay-link a {
text-decoration: none;
font-size: 28px !important;
display: block; /* Display block instead of inline */
font-size: 1.0em;
letter-spacing: 1.2px;
font-family: 'Oxygen' ;
}
@media screen and (min-width:767px){
.overlayopen{display:none;}
}
.Navbar__Link-toggle, .Navbar__Link-user {
display: none;
}
.Navbar__Items, .Navbar__Items--right, .Navbar__Link-brand {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
margin: 6px 0;
transition: 0.4s;
border-radius: 4px;
}
.bar2 {transition: 0.3s; }
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
position: relative;
width: 0;
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.site-navigation {
transition: height 0.3s;
overflow: hidden;
}
.Navbar__Items--right {
margin-left:auto;
padding-left: 15px;
border-left: 1px dashed rgba(160,160,160,0.8);
}
.Signup {
box-shadow:
3px 3px 0px 0px rgba(78,109,156,1),
-3px -3px 0px 0px rgba(78,109,156,1),
3px -3px 0px 0px rgba(78,109,156,1),
-3px 3px 0px 0px rgba(78,109,156,1);
border: 1px dashed #7E97BB;
border-radius: 7px;
height: 34px;
margin-top: 3px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
color: white !important;
height: 36px;
transition: 0.4s !important;
}
.Signup a {
position: relative;
top: -6px;
}
.Signup:hover {
background-color: #335485 !important;
box-shadow:
3px 3px 0px 0px #335485,
-3px -3px 0px 0px #335485,
3px -3px 0px 0px #335485,
-3px 3px 0px 0px #335485;
}
.Signup .fa-user, .fa-sign-in-alt {
font-size: 15px ;
}
.buttonstyle2 {
margin-left: 15px;
background: rgba(78,109,156,0);
border: 1px solid #7E97BB;
border-radius: 7px;
color: rgba(78,109,156,1) !important;
transition: 0.4s !important;
}
.buttonstyle2:Hover {
background-color: rgba(230,230,230,1);
}
/* Ipad Pro*/
@media only screen and (max-width: 1024px) {
.nav-wrapper {
width: 100%;
}
}
/* mobile/tablet version*/
@media only screen and (max-width: 768px) {
.Navbar__Items, .Navbar , .nav-wrapper {
flex-direction: column;
justify-content: space-between;
flex-wrap:wrap;
}
.nav-wrapper {
width: 100%;
}
.mobile-wrap {
}
.Navbar__Items {
width:0;/* added*/
height:0;/* added*/
overflow:hidden;
}
.Navbar__Items--right {
margin-left:0;
}
.Navbar__Link-brand {
margin:auto;
}
.Navbar__ToggleShow {
width: 100%;
background-color: rgb(0,0,0);
}
.Navbar {
padding-left: 0px;
padding-right: 0px;
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 100%, rgba(237,237,237,1) 100%);
}
.mobilenav {
padding-bottom: 0px;
}
.Navbar__ToggleShow div{
border-top: 1px solid #DBDBDB;
}
.Navbar__ToggleShow div:first-child{
border-top: 2px solid #DBDBDB;
}
.Modern-Slider .Slick-Navigation {
height: 0px;
border: none;
}
.Navbar__Link-toggle {
align-self: flex-start;
display: initial;
position: absolute;
cursor: pointer;
top: 12px;
color: rgba(78,109,156,1);
}
.Navbar__Link-user {
align-self: flex-end;
display: initial;
position: absolute;
cursor: pointer;
top: 12px;
}
.Navbar__Link-toggle, .Navbar__Link-user {
font-size: 35px;
}
.site-navigation div:after {
content:none;
}
.site-navigation div:hover::after {
content:none;
}
.Modern-Slider .Gallery-Slider .img-fill {
height: 300px; /* Added */
}
.Modern-Slider .slick-dots{
opacity: 0;
}
.Modern-Slider .Gallery-Slider:hover .PrevArrow {
opacity: 0 !important;
}
.Modern-Slider .Gallery-Slider:hover .NextArrow {
opacity: 0;
}
}
@media only screen and (min-width: 769px) {
.Modern-Slider .Gallery-Slider:hover .PrevArrow {
opacity: 1 !important;
}
.Modern-Slider .Gallery-Slider:hover .NextArrow {
opacity: 1;
}
}
.site-navigation div {
/* -webkit-transition: width 2s; */
/* transition: 2s; */
}
.site-navigation div:hover {
color: rgb(28, 121, 184);
}
/* Animated Bottom Line */
.site-navigation div:after {
content: '';
position: relative;
display: block;
width: 0;
height: 2px;
top: 0px;
background: rgb(28, 121, 184);
transition: width .5s;
}
.site-navigation div:hover::after {
width: 100%;
//transition: width .3s;
}
/* Slick Slider */
/* ==== Main CSS === */
body{padding:0;margin:0;}
.img-fill {
width: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center
}
.img-fill img {
height: 100%;
min-width: 100%;
position: relative;
display: inline-block;
max-width: none
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}
.Grid1k {
padding: 0 15px;
max-width: 1200px;
margin: auto;
}
.blocks-box,
.slick-slider {
margin: 0 0;
padding: 0!important;
}
.slick-slide {
float: left /* If RTL Make This Right */ ;
padding: 0px;
}
/* ==== Slider Style === */
.Modern-Slider{
position:relative;
}
.Gallery-Slider {
position: relative;
overflow: hidden;
background: red;
}
.Modern-Slider .Gallery-Slider {
background: #000;
}
.Modern-Slider .NextArrow{
position:absolute;
top:50%;
right:0px;
width:45px;
height:45px;
background:rgba(0,0,0,.50);
background:rgba(78, 109, 156,.20);
border:0 none;
margin-top:-22.5px;
text-align:center;
font:20px/45px FontAwesome;
color:#FFF;
z-index:5;
transition: all 1s;
opacity: 0;
}
.Modern-Slider .NextArrow:before{content:'\f105';}
.Modern-Slider .PrevArrow{
position:absolute;
top:50%;
left:0px;
width:45px;
height:45px;
background:rgba(0,0,0,.50);
background:rgba(78, 109, 156,.20);
border:0 none;
margin-top:-22.5px;
text-align:center;
font:20px/45px FontAwesome;
color:#FFF;
z-index:5;
opacity: 0;
transition: all 1s;
}
.Modern-Slider .PrevArrow:before{content:'\f104';}
.Modern-Slider .Gallery-Slider .img-fill {
/* height: 50vh; /* Removed */
background:#000;
max-height: 340px; /* Added */
display: flex !important; /* Added */
justify-content: center; /* Added */
}
.Modern-Slider .img-fill:before {
content: '';
display: block;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:2;
background:rgba(0,0,0,.50);
position: absolute;
}
.Modern-Slider .img-fill img{
filter:blur(5px);
}
.Modern-Slider .img-fill .info {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index:3;
top:20%;
padding:0 20px;
}
.Gallery-Slider .Slick-Gallery:hover .NextArrow {
opacity: 1;
}
.NextArrow:hover, .PrevArrow:hover {
width: 50px;
}
.NextArrow:focus, .PrevArrow:focus{
outline:0;
}
.Modern-Slider .img-fill h3{
font:22px/50px RalewayB;
color:#FFF;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
visibility:hidden;
text-transform:uppercase;
}
.Modern-Slider .img-fill p{
max-width:650px;
margin:auto;
margin-top:15px;
font:14px/22px NeoSansR;
color:#FFF;
height:66px;
text-align:justify;
overflow:hidden;
visibility:hidden;
text-transform:capitalize;
}
.Modern-Slider .slick-active h3{
animation:fadeInDown 1s both 0.5s;
visibility:visible;
}
.Modern-Slider .slick-active p{
animation:fadeInUp 1s both 1s;
visibility:visible;
}
.Modern-Slider .slick-dots{
position:absolute;
height:50px;
top:8px;
width:100%;
left:0px;
padding:0px;
margin:0px;
list-style-type:none;
text-align:center;
}
.Modern-Slider .slick-dots li{
display:inline-block;
width:15px;
height:15px;
background:Transparent;
-webkit-transition:all 0.5s;
transition:all 0.5s;
-webkit-border-radius:50%;
border-radius:50%;
border:2px solid #FFF;
margin:0 2.5px;
cursor:pointer;
position:relative;
}
.Modern-Slider .slick-dots li.slick-active{
background:#fff;
-webkit-box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
}
.Modern-Slider .slick-dots li a{
position:absolute;
bottom:100%;
left:50%;
width:120px;
height:75px;
display:block;
visibility:hidden;
border:4px solid rgba(0,0,0,.50);
margin-left:-60px;
margin-bottom:15px;
-webkit-transition:visibility 0.5s linear 0.5s;
transition:visibility 0.5s linear 0.5s;
-webkit-animation:fadeOut 0.5s both;
animation:fadeOut 0.5s both;
}
.Modern-Slider .slick-dots li a:after{
content:'';
position:absolute;
left:50%;
margin-left:-8px;
top:100%;
width:0;
height:0;
border:8px solid Transparent;
border-top-color:rgba(0,0,0,.50);
margin-top:4px;
}
.Modern-Slider .slick-dots li:hover a{
visibility:visible;
-webkit-transition-delay:0s;
transition-delay:0s;
-webkit-animation:fadeIn 0.5s both;
animation:fadeIn 0.5s both;
}
.Modern-Slider .slick-dots li a img{
width:100%;
height:100%;
}
.Slick-Navigation {
background:rgba(78, 109, 156,.20);
/*background: linear-gradient(to bottom, #1E406E 0%,#4E6D9C 100%); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-top: 1px dashed rgba(78, 109, 156,.60);
position: relative;
height: 40px;
top: -70px;
}
/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
function toggle_menu() {
const navs = document.querySelectorAll('.site-navigation')
var element = document.getElementById("togglebutton");
$(".site-navigation").toggleClass("mobilenav");
$(".nav-wrapper").toggleClass("mobile-wrap");
$(".overlay").toggleClass("overlayopen");
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
element.classList.toggle('change');
}
function toggleanimation(x) {
x.classList.toggle("change");
}
$(document).ready(function() {
$(".Gallery-Slider").slick({
autoplay: true,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToShow:1,
slidesToScroll:1,
pauseOnHover:false,
dots:true,
appendDots:$(".Slick-Navigation"),
respondTo:'min',
cssEase:'linear',
prevArrow:'<button class="PrevArrow "></button>',
nextArrow:'<button class="NextArrow"></button>',
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.