I want to place the navigation bar on top, in transparent, as the shown in the picture. I tried to pix the position and the width and height but still didn’t work.
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/arnold-francisca-nPhl2x4fk2s-unsplash.jpg);
background-position: center;
background-size: cover;
position: relative;
}
nav {
display: flex;
padding: 25px 50px 75px 100px;
justify-content: space-between;
align-items: center;
position: relative;
}
nav img {
width: 85px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: rgb(8, 8, 8);
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 3px;
background: #d6574e;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1 {
font-size: 40px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 16px;
color: #fff;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #cfaba9;
border: 1px solid #cfaba9;
padding: 10px 30px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border-radius: 50px;
background: #cfaba9;
transition: 1s;
}
nav .fa {
display: none;
}
#media(max-width: 700px){
.text-box h1 {
font-size: 20px;
}
.nav-links ul li {
display: block;
}
.nav-links ul li {
position: absolute;
background: #cfaba9;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
nav .fa {
display: block;
color: #cfaba9;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>Nikko Permelona | UX/UI Designer, Frontend Developer & Learner</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css">
</head>
<body>
<section class="header"></section>
<nav>
<img src="img/GYSD7530-modified.png">
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>About</li>
<li>Experience</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>UI/UX Designer, Frontend Developer & Learner</h1>
<p>I design and code gorgeously simple things, and I love what I do</p>
Explore
</div>
</body>
</html>
Just wrap the nav and the text-box divs with the header section. It looks like you closed the header section right away and haven't wrapped it with anything, modify the part like this:
<section class="header">
<nav>
<img src="img/GYSD7530-modified.png">
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>About</li>
<li>Experience</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>UI/UX Designer, Frontend Developer & Learner</h1>
<p>I design and code gorgeously simple things, and I love what I do</p>
Explore
</div>
</section>
This should work fine
You can make it transparent by use the css property:
background-color: transparent;
Also to make the nav bar go to top try putting it in div instead of nav.
Related
My navbar functions in a :selected way, which means the dropdown menu only shows when the button is selected. I would like to change it to hover instead, but when I adjust it in CSS, it doesn't change anything. I'm afraid of adjusting anything else as it may mess other things up too.
I also tried to change the height of the buttons so that the bottom-border fits perfectly at the bottom of the button when hovering over the button. Yet when I mess around with the height, hover and padding it shows no effect.
I'm not sure what I did wrong with my navbar I think I broke it, and I'm not sure where the mistakes were made.
I would really appreciate some help with fixing my navbar and perhaps a bit of advice on how the solution came to be.
Thank you!
<!DOCTYPE html>
<html lang="en">
<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">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/194918e54c.js" crossorigin="anonymous"></script>
<title>Localhost</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="faq.css">
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
<img src="photos/ae-header-logo.png" alt="" srcset="">
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
html,body {
margin: 0;
padding: 0;
height: auto;
font-family: 'Poppins';
box-sizing: border-box;
background-color: rgb(255, 255, 255) !important;
}
.navigation {
height: 120px;
background-color: green;
}
.brand {
position: absolute;
top: 1%;
left: 0%;
float: left;
text-transform: uppercase;
font-size: 1.9em;
}
.brand img{
position: relative;
margin-top: 0%;
width: 500px;
padding-left: 0%;
left: 0%;
float: left;
}
.brand img:hover{
box-shadow: 10px;
transition: all ease-in-out 0.5s;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
background-color: red;
}
nav {
float: right;
position: relative;
left: 20%;
margin-top: 20px;
background-color: rgb(255, 0, 212);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 100px;
color: black;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
border-bottom: black 2px solid;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
.nav-list li:hover ul{
display: block
}
Hope it's what you're looking for
I am having a problem regarding my Website mobile menu. Currently on the index page it works perfectly fine, but when switching to another page, it shows the side menu. For some reason this is because I am removing a banner and it seems to make the navbar's width smaller. Below will be my html and CSS code. If I keep the header tag in the other pages html code it works fine, but I do not want the header on the other pages as it does not look very appealing.
Here's the code:
var navLinks = document.getElementById("navLinks")
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-250px";
}
.header{
min-height: 100vh;
width: 100%;
background-image: url('images/background-image.jpg');
background-position: center;
background-size: cover;
position: relative;
}
.navbar{
display: flex;
padding: 10px 5%;
justify-content: space-between;
align-items: center;
background-color: black;
}
.logo a{
text-decoration: none;
color: #fff;
font-size: 30px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links .fas{
padding-right: 5px;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
margin-bottom: 30px;
}
.nav-links ul li a{
color: white;
text-decoration: none;
font-size: 20px;
}
.nav-links ul li:after{
content: '';
width: 0%;
height: 3px;
background: #fff;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover:after{
width: 100%;
}
#media only screen and (max-width: 768px){
html, body{
overflow-x: hidden;
}
.text-box h1{
font-size: 35px;
}
.nav-links ul li{
display: block;
text-decoration: none;
}
.nav-links{
position: absolute;
background: black;
height: 100vh;
width: 250px;
top: 0;
right: -250px;
text-align: left;
z-index: 2;
transition: 1s;
}
.navbar ul li{
margin-left: 45px;
margin-top: 30px;
}
.navbar .fas{
display: inline-block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.navbar ul li:hover{
text-decoration: underline 3px #fff;
}
.nav-links ul li:hover:after{
width: 0;
}
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<section class="header">
<nav class="navbar">
<h1 class="logo">SHOE REPAIR</h1>
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li><i class="fas fa-home"></i>HOME</li>
<li><i class="fas fa-concierge-bell"></i>SERVICES</li>
<li><i class="fas fa-address-card"></i>ABOUT</li>
<li><i class="fas fa-address-book"></i>CONTACT</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</section>
First picture is how it should look which works fine on the Home page, second picture is what it does on all other pages.
I am using a menu that has a background which is seethrough at the top and when you scroll down the background color of the menu changes to black. In one of my pages the background of the whole website is white so when the user scrolls to the top, the menu background is white which makes it impossible to read the menu text. I was wondering if there is a code that can change the color of the text of the menu when the menu bar is at the top of the website the menu text changes black so it is readable. here is a picture when the menu bar is at the top of the website
and not at the top. I'll add the code that codes for the menu bar.
HTML & Script:
<!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">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
You need to add the correct colors for .black class.
Before run the snippet click and Expand Snippet, because I added for large resolutions only, you can add in #media(max-width: 786px) for small resolutions (mobile devices).
I added <div style="height:1500px" class="only-for-scroll"></div> to force scroll.
I commented with //add this to you identify the changes that I did.
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
/*add this lines*/
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
/*END*/
nav .logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div style="height:1500px" class="only-for-scroll"></div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
//setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
I am trying to embed google maps in the website using iframes. I need this map to be fullscreen on any device when the map is shown. I can't figure out a way to do this, tried setting width and height to 100% which made it look like this ):
But right now my website looks like this:
Any way of making the map fullscreen?
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
sorry i cant really get into adjusting your css right now but here is a little something i came up with when i need to output YouTube videos in iframes. try it out
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
/*to adjust the height and width*/
margin-right: 20%;
margin-left: 20%;
margin-top: 20%;
margin-bottom: 20%;
/*or you can use it in single line*/
margin:20%;
/*or if you want different margins for different sides in a single line*/
margin: 20% 20% 20% 20%;
/* the above means margin: top right bottom left; */
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*instead of using margin just add a div and specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
just replace your <div class="box"></div> with the code above let me know how it turns out.
How about the following example. The solution came from Responsive iframe (google maps) and weird resizing. By tweaking padding-top and padding-bottom you can change the size.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
.box {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
overflow: hidden;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
You can also try and use CSS variables:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
let events = ['load', 'resize'];
let googleMaps = document.querySelector('.box iframe');
events.forEach( event => {
window.addEventListener(event, () => {
googleMaps.style.setProperty('--google-maps-height', `${window.innerHeight}px`);
});
});
.box {
height: 100%;
}
.box iframe {
width: 100%;
height: var(--google-maps-height);
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</body>
</html>
Are you looking for something like this? Add the following code to your css and see if it does the trick.
iframe {
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
Take a look at using viewport percentage
I am trying to make a menu appear from right to left by giving it a negative right position and from jQuery on clicking on a span it should edit the position right to zero but when i click nothing happenes
$(document).ready(function() {
$(".run_menu").click(function() {
$(".menu").animate("right", "0");
});
});
/* Global*/
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(data:image/jpeg;base64,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);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template retrospect</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/StyleSheet.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span> <!--menu should appear when click on it -->
<!--Open Menu on click-->
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li>learn more
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/JavaScript.js"></script>
</body>
</html>
Your code has no .run_menu. Add a button and your .animate function is wrong:
$(".menu").animate({
"right": 0
}, 1000);
Your <span> actually has the wrong class name:
<span class="runmenu">menu</span>
Which should be:
<span class="run-menu">menu</span>
Also, the menu is not accessible because of a wrong z-index. Kindly fix that.
Working Output: http://output.jsbin.com/salutajuna
Please click on the learn more.