For my website I want to make my features button open a list of content and closing it when clicking outside of the button. However if I try to apply my code (which I thought to be correct) my dropdown list disappears for any reason. Does anyone know how to stop my dropdown list from disappearing? My code is the following:
// Rotation arrow icon on click
const acc = document.getElementsByClassName("switch");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.classList.toggle("iconUp");
});
}
// Opening dropdown menu on click
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(Event) {
if (!Event.target.matches('.dropbtn')) {
const dropdowns = document.getElementsByClassName("dropdown-content");
let i;
for (i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* General styling attributes */
* {
margin:0;
padding:0;
border:0;
outline:0;
text-decoration:none;
list-style:none;
box-sizing: border-box;
}
:root {
--color-primary: #4EC843;
--color-secondary: #387CFF;
--color-dashboard: purple;
--color-hover: #20d62c;
--color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);
--container-width-lg: 80%;
--container-width-md: 90%;
--container-width-sm: 94%;
--dashboard-width: clamp(210px, 22vw, 325px);
--transition: all 400ms ease;
--tranition-button: all 800ms ease;
}
body * {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
}
.container {
width: var(--container-width-lg);
margin: 0 auto;
}
h1, h2, h3, h4 h5{
line-height:inherit;
}
h1 {
font-size:3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size:2.063rem;
}
h4 {
font-size:1.125rem;
}
h5 {
font-size:0.938rem;
}
hr {
display: flex;
opacity: 15%;
width: 3.125rem;
text-align: center;
}
img {
width:100%;
height:auto;
}
/* Large screen size website design */
/* Navigation Menu styling Index.html */
nav {
width:100%;
height:4.5rem;
position:fixed;
top:0;
z-index:11;
background: white;
opacity: 98.2%;
}
.nav__container {
height:4.5rem;
display:flex;
justify-content: space-between;
align-items: center;
}
.nav__container li, a {
font-size:0.95rem;
font-weight:600;
color:black;
}
.nav__menu button {
background:none;
}
.Hamburger {
display:none;
}
.nav__menu {
display:flex;
align-items: center;
gap:3.5rem;
}
.nav__menu a:hover {
transition: var(--transition);
color:grey;
}
.Login_nav {
display: block;
}
.Login:hover {
transition: var(--transition);
color:grey;
}
.switchIconRotate {
transform-origin: center;
transition: 0.2s;
}
.fa-angle-down {
color:#6161F2
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: var(--color-primary);
border-radius:2.125rem;
border:none;
color: white;
width:8.125rem;
height:2.188rem;
font-weight:600;
font-size:0.938rem;
}
#Demobutton:hover {
background-color: #20D62C;
transition:var(--tranition-button);
}
#startingbackground {
content:'';
position:absolute;
height:100%;
width:100%;
background: var(--color-variant);
}
.dropbtn {
cursor: pointer;
}
.show {
display: flex;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
visibility: hidden;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 11;
border-radius: 0.4rem;
padding: 2rem;
gap:1.5rem;
flex-direction: column;
opacity: 100%;
}
/* Header styling Index.html */
header {
position: relative;
margin-top:4.5rem;
margin-left:3.125rem;
overflow:hidden;
height:49.313rem;
margin-bottom: 5rem;
}
header h1 {
color:white;
}
header p {
color:#CECECE;
font-size: 1rem;
}
.header__container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap:5rem;
height: 25rem;
margin-top:2rem;
}
.header__left {
text-align: center;
}
.header__left p {
margin: 1rem 0rem 2.375rem;
}
#Trialbutton {
background-color: var(--color-primary);
border-radius:0.625rem;
border-style:solid;
border:none;
cursor:pointer;
font-size: 1rem;
color:white;
height:3.175rem;
width:17.563rem;
}
#Requestbutton {
background-color:white;
border-radius:0.625rem;
border-style:solid;
border:none;
cursor:pointer;
font-size: 1rem;
color:#454545;
height:3.175rem;
width:10.563rem;
}
#Trialbutton:hover {
transition:var(--tranition-button);
background-color:#20D62C;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Font-families -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;500;600&display=swap" rel="stylesheet">
<!-- Fontawesome Icon -->
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<!-- Iconscout CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<div id="startingbackground">
<!-- Start of Navigation Menu -->
<nav>
<div class="container nav__container">
<img src="/icons/logo.svg" alt="logo">
<div class="nav__menu">
<div class="dropdown">
<button class="dropbtn switch" onclick="myFunction()">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></button>
<div class="dropdown-content" id="myDropdown">
Link1
Link2
Link3
</div>
</div>
Pricing
Contact Us
</div>
<div class="Login_nav">
Login
<form><button id="Demobutton">Get demo</button></form>
</div>
<div class="Hamburger">
<button id="open-menu-btn"><i class="uil uil-bars"></i></button>
<button id="open-menu-btn"><i class="uil uil-multiply"></i></button>
</div>
</div>
</nav>
<!-- End of Navigation Menu -->
<!-- Start of Header -->
<header>
<div class="container header__container">
<div class="header__left">
<h1>The all-in-one draft to <br> deal platform</h1>
<p>Our product enables your team to create, approve, sign and <br> manage your contracts in one workspace</p>
<div class="Trialgroup">
<form><button id="Trialbutton">Start Free 14-day Trial</button></form>
<form><button id="Requestbutton">Request a Demo</button></form>
</div>
</div>
<div class="header_right">
</div>
</div>
</header>
</div>
first of all your dropdown doesn't get the class show after fixing this then your styles in class show will be overwritten by the dropdown styles itself you have to use !important
.show {
display: flex !important;
visibility: visible !important;
}
Related
For my website I want my icon to display a menu bar for mobile users. I have written some javascript code for it, but I can't get it to work properly. I tried creating an element called "Menu" and assigned the icon button class to it. Afterwards I just made a simple classlist toggle for the div I want to show up. When I do this, the class hamburgermenu (the class i want to show when clicking on the button) shows up as a class within the button. To the contrary I want the class to show up on his own without being in the button class. Does anyone know what the problem might be and pointing me in the right direction?
My code is beneath:
const menu = document.querySelector(".hamburger button"); // Get dropdown menu when clicking on hamburger Icon
menu.addEventListener("click", function() {
Showdropdown();
});
// Showing dropdown content
function Showdropdown() {
menu.classList.toggle("hamburgermenu");
}
/* General styling attributes */
html {
-webkit-text-size-adjust: 100%;
}
* {
margin:0;
padding:0;
border:0;
outline:0;
text-decoration:none;
list-style:none;
box-sizing: border-box;
}
:root {
--color-primary: #4EC843;
--color-secondary: #387CFF;
--color-dashboard: purple;
--color-hover: #20d62c;
--color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);
--color-showcase: #FAFAFA;
--color-withwithout: #6D6D6D;
--container-width-lg: 85%;
--container-width-md: 90%;
--container-width-sm: 94%;
--dashboard-width: clamp(210px, 22vw, 325px);
--transition: all 200ms ease;
--transition-hamburger: all 180ms ease;
--tranition-button: all 800ms ease;
}
body * {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
width: var(--container-width-sm);
margin: 0 auto;
}
a {
color:black;
}
h1, h2, h3, h4 h5{
line-height:inherit;
}
h1 {
font-size:3rem;
}
h2 {
font-size: 1.9rem;
}
h3 {
font-size:1.363rem;
}
h4 {
font-size:1.125rem;
}
h5 {
font-size:0.938rem;
}
.m1 {
margin-left:0.5rem;
}
.h-6 {
height:1.5rem;
}
.w-6 {
width:1.5rem;
}
svg {
display:flex;
vertical-align: middle;
}
hr {
display: flex;
opacity: 15%;
width: 3.125rem;
text-align: center;
}
img {
width:100%;
height:auto;
}
section {
display:block;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.transition {
transition: all 300ms ease;
}
/* Navigation Menu */
nav {
width:100%;
height:4.5rem;
position:fixed;
top:0;
z-index:11;
background: white;
}
.nav_container {
height:4.5rem;
display:flex;
justify-content: space-between;
align-items: center;
}
.nav_menu {
display:flex;
align-items: center;
gap:3.5rem;
font-size: 0.95rem;
font-weight:500;
}
.nav_menu button {
background:none;
font-size:0.95rem;
font-weight: 500;
}
.nav_menu button:hover {
color:grey;
transition: var(--transition);
}
.nav_menu a:hover {
transition: var(--transition);
color: grey;
}
.login_nav {
display: flex;
align-items: center;
gap:1rem;
font-weight:500;
font-size: 0.95rem;
}
.login_nav a {
color:black;
}
.login_nav a:hover {
transition: var(--transition);
color:grey;
}
.Login:hover {
transition: var(--transition);
color:grey;
}
.switchIconRotate {
transform-origin: center;
transition: 0.2s;
}
.fa-angle-down {
color:#6161F2
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
.demobutton {
cursor:pointer;
background-color: var(--color-primary);
border-radius:2.125rem;
border:none;
color: white;
width:8.125rem;
height:2.188rem;
font-weight:500;
font-size:0.918rem;
}
.demobutton:hover {
background-color: #20D62C;
transition:var(--tranition-button);
}
.startingbackground {
content:'';
position:relative;
margin-top:4.5rem;
width:100%;
height:100vh;
background: var(--color-variant);
border-radius: 0% 0% 75% 0%;
overflow: hidden;
}
.startingbackground3 {
display: flex;
position: relative;
margin-top: 2rem;
}
.dropbtn {
cursor: pointer;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
position: absolute;
background-color: white;
border-radius: 0.4rem;
padding: 2rem;
gap:1.5rem;
opacity: 100%;
display: none;
}
.dropdown-content2 {
display:none;
top:4.5rem;
right:20rem;
width:25rem;
position:absolute;
padding:0.5rem;
gap:1.5rem;
opacity: 100%;
border-radius:0.4rem;
background-color:white;
margin: 0 auto 0 auto;
transition: 300ms;
}
.show {
display:flex;
flex-direction: column;
}
.hamburger {
display:none;
}
.hamburger a {
font-family: inherit;
}
.hamburger a:hover {
transition: var(--transition);
color: grey;
}
.hamburger_button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: white;
border-radius: 0.375rem;
width:2rem;
height:2rem;
}
.hamburger_button:hover {
transition: var(--transition-hamburger);
background-color:rgb(217, 217, 217);
}
.hamburgermenu {
display: none;
width:10rem;
height:10rem;
background-color:rgb(255 255 255);
margin-top: 15rem;
border-radius:5rem;
}
#media screen and (max-width: 890px) {
.hamburger {
display:block;
}
.nav_menu {
display:none;
}
.login_nav {
display:none;
}
.hamburger {
display:block;
}
.nav_container {
padding-left: 0.3rem;
margin-left: auto;
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Font-families -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;500;600&display=swap" rel="stylesheet">
<!-- Animations -->
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
<!-- Fontawesome Icon -->
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<!-- Iconscout CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<!-- Navigation Menu -->
<header>
<nav>
<div class="container nav_container">
<img src="/icons/logo.svg" alt="logo">
<div class="nav_menu">
<div class="dropdown">
<button class="dropbtn switch" onclick="myFunction()"><span>Features</span><i class="fa-solid fa-angle-down switchIconRotate m1"></i></button>
<div class="dropdown-content" id="myDropdown">
Link1
Link2
Link3
</div>
</div>
Pricing
Contact Us
</div>
<div class="login_nav">
Login
<form><button class="demobutton">Get demo</button></form>
</div>
<div class="hamburger">
<button class="hamburger_button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" class="h-6 w-6 "><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<div class="hamburgermenu">
</div>
</nav>
</header>
`.hamburgermenu {
display:block;
width:10rem;
height:10rem;
background-color:rgb(255 255 255);
margin-top: 15rem;
border-radius:5rem;
}
.hamburgermenu {
display: none;
}
Remove the additional class hamburgermenu that has a display: none; property. Never make duplicates in CSS.
Below is my html/css. Feel free to see how it looks in your ide(I use vscode). When I click on the hamburger menu in the shrunken screen I want the 'Home' and 'About' text in the nav to appear and stack on top of eachother. I'm really just struggling with the JS(making the text appear once you click on the hamburger menu), I can try to implement the stacking afterwards but if you want to give it a shot go right ahead. Anything will help, and if you can implement the menu with JS that'll be amazing, that's what I've been trying to get down through this project. good day.
'''''''
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>Backroads || Tour Company</title>
<!-- favicon -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="./fontawesome-free-5.12.1-web/css/all.min.css"
/>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<!-- styles css -->
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- header -->
<main>
<nav class="topNav">
<ul>
<div>
<li><img src="./images/favicon.ico" alt=""></li>
</div>
<button class="hamburger" id="hamburger" onclick="showText()">
<i class="fas fa-bars"></i>
</button>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</main>
<!-- js -->
<script src="./js/app.js"></script>
</body>
</html>
'''''''
css
'''''''
/*
===============
Fonts
===============
*/
#import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* primary/main color */
--clr-primary-5: hsl(185, 62%, 45%);
--clr-white: #fff;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--ff-primary: "Lato", sans-serif;
}
/*
===============
Global Styles
===============
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-primary);
background: var(--clr-white);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img {
width: 100%;
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
#media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: var(--clr-primary-5);
color: var(--clr-white);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid transparent;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn:hover {
color: var(--clr-primary-1);
background: var(--clr-primary-8);
}
/*
===============
Navbar
=============== */
/* background of navbar */
nav ul{
background-color: grey;
display: flex;
flex-direction: row;
padding: .5rem;
border: white solid;
justify-content: flex-end;
}
nav ul li {
padding: 0 .5rem;
}
/* icon image */
nav div{
margin-right: auto;
}
nav div li img {
width: 2rem;
}
.hamburger{
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 20px;
visibility: hidden;
}
nav li a{
color: var(--clr-primary-5);
}
.hamburger:focus{
outline: none;
}
#media screen and (max-width: 992px) {
nav li a {
display: none;
}
.hamburger{
visibility: visible;
}
}
You can give an id to your menu icon.
Then get this icon with DOM in ur js and add an event listener for listening 'click' on this element.
If clicked you will make visible your hamburger menu.
const burger = document.getElementById("hamburger");
burger.addEventListener("click", () => {
burger.textContent = "Justin";
burger.style.backgroundColor = "#ebd";
});
you can listen click on an specific element and then you can make sthing after that like this.
I'm trying to use icons from fontawesome to create a menu that will pop up on the mobile version of my site. However, the icons do not appear and are not clickable, thus the animation that makes the menu pop up does not work. In addition, some of the items do not have their own row, as seen in the gallery and cv section, and the text on my homepage is not centered. Could someone please explain how to fix these issues? Thank you![enter image description here][1]
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', 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(images/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav a{
color: #fff;
text-decoration: none;
font-size: 18px;
}
nav a:hover{
color:#f44336;
transition: .4s;
}
.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: #fff;
text-decoration: none;
font-size: 13px;
}
nav ul li a:hover{
color:#f44336;
transition: .4s;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 54px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
nav .fa{
display: none;
}
#media(max-width: 700px){
.text-box h1{
font-size: 20px;
}
.navi-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa{
display: block;
color: #fff;
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=">
<title>Personal Homepage</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<section class="header">
<nav>
AMANDA YEE
<div class="nav-links" id="navLinks">
<i class="fa fa-times-circle" onclick="hideMenu()"></i>
<ul>
<li>ABOUT</li>
<li>GALLERY</li>
<li>CV</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>NICE TO MEET YOU</h1>
<p>Hi! My name is Amanda Yee and I'm a User Experience Designer studying at Pratt.
</p>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementbyId("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
To use font awesome 5 icons, go to their official website and create a kit using your email address. They will provide you a script tag add that script tag in your HTML file's head and now you are good to use fa icons. One thing to note is that now fa fa-bars will be fas fa-bars.
The thing why Gallery and CV are showing in a row is you have set wrong class name in your media query:
.navi-links ul li {
display: block;
}
In addition to this, I will propose few changes to your file-
In the 4th line replace the viewport meta tag with the below code:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
In your script document.getElementbyId is not properly written replace that line with the below code:
var navLinks = document.getElementById("navLinks");
I hope it worked as you expected.
I am coding a very simple HTML CSS program and here is my problem.
I made a picture in id named slider, and I want to write some text into it. And as the tutorial, I wrote a class named text-content in the slider. Very easy to understand, right?
Here is all of my index.html code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-repeat;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<div class="text-description">We had the best time playing at Venice Beach!</div>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
That is all of my code.
Here is the tutorial's picture, as you can see, the text is in the picture
Because when I click on the picture, it said to me that it is in the slider.
As you can see in this picture
I thought that if the picture is in the slider, and the text-content is in the slider, the text-content must in the picture?
My question is, I put class text-content in id slider, but the class text-content is pushed down, as you can see in this picture
Could you please explain this problem to me? Thank you very much for your time.
I assume you want to make a Hero Image. You can move the text position up.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80') top center / cover no-repeat;
}
#slider .text-content{
position: absolute;
bottom: 25%;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<p class="text-description">We had the best time playing at Venice Beach!</p>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
As you question that you want to create a hero image section and you facing some design issue. so you have to look for CSS properties that should you've to use. If you want a demo section like that then I can suggest you check this manual.
https://www.w3schools.com/howto/howto_css_hero_image.asp
You can redesign your section as you want.
For the #slider div, use display:inline-block:
#slider{display:inline-block}
I'm making a menu but I have a problem with my JavaScript.
I messed up the JavaScript file, but it works in general. The thing is that when you load the page and your with is less than 858px and then you click in one of the items of the menu, if then you make your width larger the menu disappears. So I want to not disappear it.
JavaScript, HTML and CSS:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<script src="./main.js"></script>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
The function "hide()" makes the navigation disappear. For example, you said in the navigation that if you click on the list element, the navigation should disappear. If you remove the "display: none" everything should work as you wanted it to.
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
Try it this way:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
Happy Coding!