I am working on a new site at the moment, and I'm wondering how I would go about making the sidebar responsive, meaning that:
it moves from the left to the top (not sticky);
the links turn into a hamburger icon;
when the hamburger icon is tapped, a full-screen menu appears (transparent colour), withthe available links centered on the screen, and an "X" to dismiss the menu in the top right;
both the hamburger icon and the logo are centered vertically in the nav, with the logo aligned to the left and the hamburger icon to the right;
Here's my HTML:
<!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>Maestoso Digital</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
</body>
</html>
And here's my CSS:
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p, ul, li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {float: left;}
div#content {margin-left: 0; padding: 5px;}
}
#media screen and (max-width: 400px) {
#nav a {
text-align: center;
float: none;
}
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
font-color: #1a1a1a;
}
h1 {
font-size: 24pt;
font-color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 120px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
I have tried everything that I can think of, and just can't get it to work. Any suggestions would be hugely appreciated.
Yours, Antiquis
This is a very basic example of a toggleable menu, but you need at least a little bit of javascript to toggle an .open class on your navigation container. The .open adds display: block, while by default in the mobile css it's display:none so the menu is hidden at first.
Or if you want to animate the appearance of the menu you'd be toggling the visibility and height instead for example - there are different implementations for this, I suggest inspecting other website's menu codes at a small viewport size to see how they've implemented their mobile navs for ideas.
I have not put these styles inside media queries in my example so you can clearly see it in action, and not have to resize the window.
function navToggle() {
document.getElementById('nav-links').classList.toggle("open");
}
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p,
ul,
li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
font-color: #1a1a1a;
}
h1 {
font-size: 24pt;
font-color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 120px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
/*for purposes of demonstration, normally you stick this code in a media query, hide the hamburger toggle on desktop! */
#nav-links {
display: none;
}
#nav-links.open {
display: block;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {
float: left;
}
div#content {
margin-left: 0;
padding: 5px;
}
}
#media screen and (max-width: 400px) {
#nav a {
text-align: center;
float: none;
}
}
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<div class="hamburger-cont"><button id="hamburger-toggle" onclick="navToggle()">☰</button></div>
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p,
ul,
li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
.nav-links {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.nav-links li {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navigation a:hover,
.navigation a:focus {
color: #f1f1f1;
}
#hamburger {
display: none;
}
.navigation .closebtn {
display: none;
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {
float: left;
}
div#content {
margin-left: 0;
padding: 5px;
}
}
#media screen and (max-width: 400px) {
#hamburger {
display: block;
}
.navigation {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
#nav a {
text-align: center;
float: none;
}
.navigation a {
font-size: 20px
}
.navigation .closebtn {
display: block;
font-size: 40px;
top: 15px;
right: 35px;
}
li {
padding: 10px;
}
#nav-links {
text-align: center;
margin-top: 40%;
}
#header {
position: relative;
top: 167px;
left: -303px;
}
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
color: #1a1a1a;
}
h1 {
font-size: 24pt;
color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 95px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
<!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>Maestoso Digital</title>
<link rel="stylesheet" type="text/css" href="stack.css" />
</head>
<body>
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<div id="myNav" class="navigation">
×
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="hamburger">☰</span>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
<script>
function openNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
</script>
</body>
</html>
Related
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
I am trying to have my iframe video center to page and also resize. I have tried setting the height to a viewpoint height and using 100% for the width. I have also tried to take in the padding to half of the page. When I give the div a height the video resizes to the div - even when the size is smaller. Right now setting the margin and adding a max width works but I am trying to resize the video with no resolve.
HTML
<!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="style.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/a16d2517bd.js" crossorigin="anonymous"></script>
<title>Keith McDonald Plumbing | Commercial</title>
</head>
<body>
<nav>
<div class="logo_header">
<a href="./home.html"><img src="https://cdn-icons-png.flaticon.com/512/2301/2301541.png"
alt="Site Name" /></a>
<h1>Keith McDonald Plumbing</h1>
</div>
<ul class="navigation_links">
</li>
<!--Align skunk with menu items. Make sure it doesn't glow.-->
<li>ABOUT</li>
<li>COMMERCIAL</li>
<li>EMPLOYMENT</li>
<li>SERVICES</li>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="./app.js"></script>
<section id="hero">
<div class="container">
<div class="info">
<h2>Commercial</h2>
</div>
<div class="info">
<h3>We gotcha' covered!</h3>
</div>
<div class="info">
Request Service
</div>
</div>
</section>
<main>
<div class="vid_com">
<iframe src="https://www.youtube.com/embed/rVVsJa6LOeM" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</main>
<footer>
<section class="footer_social">
<div class="social"><i class="fa-brands fa-twitter-square"></i></div>
<div class="social"><i class="fa-brands fa-facebook-square"></i>
</div>
<div class="social"><a href="https://www.instagram.com/?hl=en"><i
class="fa-brands fa-instagram-square"></i></a></div>
</section>
<ul class="navigation_links_footer">
</li>
<!--Align skunk with menu items. Make sure it doesn't glow.-->
<li>ABOUT</li>
<li>COMMERCIAL</li>
<li>EMPLOYMENT</li>
<li>SERVICES</li>
</li>
</ul>
<h4>Contact Us</h4>
<p>keithmcdonald#plumbing.com</p>
</footer>
<div>
</div>
</body>
</html>
CSS
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
margin: 0 auto;
}
/*
grey:#666666
dark blue: #204060
blue: #336699
red: #F20505
white: #FFFFFF
*/
/* NAV BAR */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 15vh;
background-color: white;
width: 100%;
}
.logo_header {
color: #204060;
text-transform: uppercase;
letter-spacing: 5px;
display: inline-flex;
padding-right: 10%;
width: 40%;
}
.logo_header a{
padding-right: 3%;
}
.logo_header img{
width: 2em;
padding-right: 3%;
}
.navigation_links {
display: flex;
text-decoration: none;
width: 30%;
background-color: white;
}
.navigation_links a {
color: #204060;
text-decoration: none;
}
.navigation_links a:hover {
font-weight: bold;
text-decoration: underline;
}
.navigation_links li {
list-style: none;
}
.burger {
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: #204060;
margin: 5px;
}
#media screen and (max-width:1736px){
.logo_header a{
padding-right: 3%;
padding-left: 5%;
}
}
#media screen and (max-width:1280px){
.navigation_links {
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navigation_links {
position: absolute;
right: 0;
height: 26vh;
top: 15vh;
background-color: #204060;
color: #204060;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translatex(100%);
transition: transform 0.5s ease-in;
}
.navigation_links a {
color: white;
text-decoration: none;
}
.navigation_links li {
padding: 2vh;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav_active{
transform: translatex(0%);
}
/* HERO BOX */
#hero {
height: 65vh;
background: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), #336699), url(https://scontent-atl3-2.xx.fbcdn.net/v/t31.18172-8/28516625_1598055023650084_5608745362596556363_o.jpg?_nc_cat=101&ccb=1-7&_nc_sid=e3f864&_nc_ohc=ydWG8T9iKucAX8wEQ-V&_nc_ht=scontent-atl3-2.xx&oh=00_AT9aRGA5yl35nf6769WG8cFz8NlXwhqsaM9HxahErVehJA&oe=62EE5264) no-repeat center / cover;
background-color: #204060;
color: #F20505;
}
#hero img {
height: 80em;
}
#hero h2{
font-size: 50px;
}
#hero h3 {
color: white;
font-size: 25px;
}
.container {
width: 90%;
height: 100%;
max-height: 50px;
padding:8vw;
}
.info {
margin-top: 2vh;
}
.info a {
background-color: #F20505;
text-decoration: none;
color: white;
padding: 5px;
border-radius: 10px;
border: 1px solid #F20505;
}
.info a:hover {
font-weight: bold;
}
#media screen and (max-width:600px){
.logo_header {
display: none;
}
#hero {
height: 675px;
}
.about-column {
display: inline;
}
}
/* HOME INFO SECTION */
main {
height: min-content;
}
.service {
background-color: #336699;
height: min-content;
padding: 5vh 0vh 5vh 0vh;
color: white;
}
.row {
display: flex;
width: 70%;
}
.service-column {
flex: 30%;
text-align: right;
padding: 1em;
}
.about-column {
flex: 70%;
text-align: left;
margin: 3em;
}
main h1 {
margin-top: 2vh;
text-align: center;
height: 10%;
width: 100%;
padding: 1vw;
}
/* Location Section */
.location {
background-color: #336699;
height: min-content;
padding: 1vh 0vh 1vh 0vh;
color: #F20505;
}
.location h1 {
padding: 0 auto;
}
/* Member Logo Section */
.member {
text-align: center;
background-color: #c9dbed;
height: min-content;
padding: 5vh;
}
.member h4, h5 {
color: #F20505;
}
.member_logo img{
width: 300px;
padding: 1vw;
}
.top_button {
color:#F20505;
text-decoration: none;
}
.top_button:hover {
text-decoration: underline;
}
/* Footer */
footer{
background-color: #336699;
height: min-content;
padding: 2vh 0vh;
color: #F20505;
padding: 2vh;
color:#c9dbed;
}
footer .social {
text-align: center;
padding-bottom: 25px;
color:#c9dbed;
box-sizing: border-box;
margin: 0;
padding: 0;
display:inline-block;
}
footer .social i {
text-align: center;
padding-bottom: 25px;
color:#c9dbed;
}
footer .social a {
font-size: 24px;
text-align: center;
text-decoration: none;
list-style: none;
}
footer ul {
text-decoration: none;
list-style: none;
}
footer ul a {
text-decoration: none;
font-weight: 500;
color:#c9dbed;
}
footer ul a:hover {
text-decoration: none;
font-weight: 700;
}
footer h4 {
color:#c9dbed;
margin-top: 2em;
}
/* COMMERCIAL */
.vid_com {
margin: auto;
max-width: 300px;
}
iframe {
width: 100%;
height: 600px;
}
JS
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation_links');
burger.addEventListener('click',() =>{
nav.classList.toggle('nav_active');
});
}
navSlide();
I have found a tutorial for a navigation menu with a logo to the left. But now I would like it to have the hamburger icon for mobile devices and I'm not sure how to do this. Unfortunately, I have been unable to find a tutorial online with my specific needs but have tried using a tutorial for a hamburger icon but had no luck and went back to the beginning.
<div class="container">
<div class="logo">
<img src="images/logo-large.png" alt="Nathan Ashbury Logo" class="image-1">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Coding</li>
<li>Photography</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
```
.container {
clear: both;
overflow: auto;
}
nav {
background-color: rgba(18,7,88,1.00);
margin: 10px auto;
text-align: center;
width: 95%;
}
.logo img {
float: left;
width: 130px;
}
.image-2 {
display: none;
}
.image-3 {
display: none;
}
nav ul li {
display: inline-block;
padding: 10px;
font-size: 20px;
font-family: "Helvetica", sans-serif;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
text-transform: uppercase;
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<h1>Example: Creating a hamburger menu</h1>
<div class="top">
<i class="material-icons">dehaze</i>
</div>
</header>
<nav class="menu">
home
about
products
services
contact
</nav>
<main>
Site content.
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
CSS
* { margin: 0 auto; font-family: sans-serif; }
body { margin: 0 auto; }
header {
height: 70px;
background-color: #3e739d;
border-bottom: 1px solid #494949;
display: flex;
align-items: center;
justify-content: center;
}
header > h1 {
width: calc(100% - 160px);
text-align: center;
font-size: 20px;
color: white;
}
header > .top {
position: absolute;
left: 20px;
}
header > .top a.menu_icon i {
color: #000;
font-size: 40px;
padding-top: 5px;
transition: .2s ease;
}
header > .top a.menu_icon:hover i {
color: #fff;
}
nav.menu {
width: 300px;
min-height: calc(100vh - 121px);
background-color: #03a9f4;
position: absolute;
left: -300px;
transition: .3s all;
}
nav.menu > a {
display: block;
padding: 5px;
margin: 15px 0 0px 20px;
color: #494949;
text-transform: uppercase;
}
main {
width: 100%;
padding: 30px;
box-sizing: border-box;
}
footer {
height: 50px;
background-color: #494949;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
position: fixed;
width: 100%;
}
.menu_show {
left: 0!important;
}
#media screen and (max-width: 425px) {
header h1 {
font-size: 16px;
}
}
#media screen and (max-width: 360px) {
nav.menu {
width: 100%;
left: -100%;
}
}
To activate the menu, displaying or hiding the navigation list when it
is clicked, we use the jQuery library. Here is the click event of the
button that contains the class top and jQuery's "toggleClass"
function, adding or removing the " menu_show" class from the menu,
making it visible or invisible, as follows:
$(document).ready(function() {
$("body").on('click', '.top', function() {
$("nav.menu").toggleClass("menu_show");
});
});
I'm having trouble with "a:active" not working at all. "a:hover" is working correctly on the other hand.
/* CSS Document */
#charset "utf-8";
/* Main HTML Elements */
body {
font-family: "Open Sans";
font-size: 14px;
background-color: #FFFFFF;
color: #1B242D;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h1 {
font-size: 26px;
color: #FFFFFF;
}
h2 {
font-size: 20px;
color: #5EB59C;
}
h3 {
font-size: 18px;
color: #28BDEA;
}
h4 {
font-size: 14px;
color: #00ACDF;
}
/* Bart Specific */
#mainContainer {
position: absolute;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#topContainer {
position: fixed;
top: 0px;
width: 100%;
height: 150px;
background-color: #1B242D;
z-index: 1;
}
#topBar {
position: absolute;
top: 0px;
height: 5px;
width: 100%;
background-color: #00ACDF;
overflow: hidden;
}
#headerContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
color: #FFFFFF;
}
#headerArrow {
position: absolute;
top: 150px;
right: 65px;
width: 0px;
height: 0px;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 60px solid #1B242D;
}
#headerText {
position: absolute;
bottom: 0px;
left: 5px;
}
#TopNav {
position: absolute;
top: 5px;
right: 35px;
}
#TopNav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#TopNav ul li {
display: inline-block;
}
#TopNav ul li a {
display: block;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
text-align: center;
color: #FFFFFF;
font-size: 16px;
text-decoration: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* #TopNav a:link {
text-decoration: none;
} */
/* #TopNav a:visited {
text-decoration: none;
color: #FFFFFF;
} */
#TopNav ul li a:hover {
text-decoration: none;
font-weight: !important;
color: #FFFFFF;
background-color: #28BDEA;
}
#TopNav ul li a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#midContainer {
position: absolute;
top: 160px;
padding: 0px;
margin: 0px;
width: 100%;
}
#mainContent {
position: absolute;
width: auto;
right: 305px;
left: 10px;
padding-bottom: 10px;
}
#contentSeparator {
position: fixed;
width: 1px;
height: 80%;
right: 295px;
background-color: #8D9299;
}
#newsContainer {
position: absolute;
top: 50px;
right: 25px;
max-width: 250px;
min-width: 250px;
text-align: center;
}
#bottomContainer {
position: fixed;
bottom: 0px;
background-color: #8D9299;
width: 100%;
height: 25px;
color: #FFFFFF;
text-align: center;
}
#footerContent {
position: absolute;
top: 3px;
width: 100%;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen and (max-width: 801px)" href="/css/p_mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" href="/css/p_def.css">
<link rel="stylesheet" type="text/css" href="/inc/fontawesome/css/font-awesome.min.css">
<script src="/inc/js/jquery-1.11.2.min.js"></script>
<script src="/inc/js/webfont.js"></script>
<title>Home</title>
</head>
<body>
<div id="mainContainer">
<div id="topContainer">
<div id="topBar"></div>
<div id="headerContainer">
<div id="headerArrow"></div>
<div id="headerText"><h1>Page Title Here</h1><h4>...a very warm welcome to my personal portfolio website.</h4></div>
<div id="TopNav">
<ul>
<li>Home</li>
<li>My Work</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Documents</li>
</ul>
</div>
</div>
</div>
<div id="midContainer">
<div id="mainContent">
<p>Some Text Here</p>
</div>
<div id="contentSeparator"></div>
<div id="newsContainer">
<div id="news_1">
<p>Some news here...</p>
<hr>
<p>Some more news here...</p>
</div>
</div>
</div>
<div id="bottomContainer">
<div id="footerContent">
Copyright Notice Here
</div>
</div>
</div>
</body>
</html>
I have tried many times to fix this but it just won't work.
I have used this before and I set it up identically and it worked fine over there, but for some reason not here. Any clues?
Thanks!
MODIFICATION: I have now added full page CSS and HTML if this may help in solving of the problem. Thanks for your help!
The problem is this :
#TopNav a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#TopNav a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
If you observe there is no difference between the two states. They are the same. The active class actually works in this case but since it is the same as the hover state in terms of CSS, you observe no difference visually.
So, let's change the active state's CSS a bit. Lets add an orange background with black text on active state. So the class would be modified as follows :
#TopNav a:active {
text-decoration: none;
color: Black;
background-color: orange;
}
Now, you can observe that it works. Just observe that when you click the link, you can see the anchor links having an orange background while the text turns black as specified by our active class's CSS.
See this working below :
#TopNav {
position: absolute;
top: 5px;
right: 35px;
background-color: #1B242D;
}
#TopNav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#TopNav ul li {
display: inline-block;
}
#TopNav a {
display: block;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
text-align: center;
color: #FFFFFF;
font-size: 16px;
text-decoration: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#TopNav a:link {
text-decoration: none;
}
#TopNav a:visited {
text-decoration: none;
color: #FFFFFF;
}
#TopNav a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#TopNav a:active {
text-decoration: none;
color: Black;
background-color: orange;
}
<div id="TopNav">
<ul>
<li>Home</li>
<li>My Work</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Documents</li>
</ul>
</div>