guys! I have some problems with my script. It's with my navigation button which if you press the tab should be coming up. I don't get any error codes. Could I get some help? It does give me value back in the console "true" or "false". I think the problem is not with the javascript more like with CSS or HTML. Thank you in advance!
const primaryNav = document.querySelector(".nav-items");
const navToggle = document.querySelector(".mobile-nav-toggle");
navToggle.addEventListener("click", () => {
const visibility = primaryNav.getAttribute("data-visible");
if(visibility === "false"){
primaryNav.setAttribute("data-visible", true);
navToggle.setAttribute("aria-expanded", true);
} else if (visibility === "true"){
primaryNav.setAttribute("data-visible", false);
navToggle.setAttribute("aria-expanded" , false);
}
});
html,body{
margin: 0%;
box-sizing: border-box;
background-image: url(../assets/Coding2.jpg);
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
}
/*-------Global Classes ------*/
a{
text-decoration: none;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul{
list-style-type: none;
}
/* -------navbar-------*/
.nav{
padding: 0 2rem;
height: 0rem;
min-height: 15vh;
overflow: hidden;
}
.nav .nav-brand a{
font-size:2rem;
padding:1rem 1.5rem;
position:relative;
top: 15%;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .nav-items{
list-style-type: none;
display: flex;
margin: 0;
align-items: center;
justify-content: space-between;
}
.nav .nav-menu{
justify-content: space-between;
}
.nav .nav-items .nav-link{
padding: 1rem 1.5rem;
position: relative;
font-size: 1.1rem;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .social{
padding:1.4rem 0;
}
.nav .nav-items a{
text-decoration: none;
color: white;
font-family: Arial, "Time New Roman";
}
.mobile-nav-toggle{
display: none;
}
.nav .nav-items a > [aria-hidden="true"]{
font-weight: 700;
margin-inline-end: 0.75rem;
}
#media (max-width: 35em){
.nav .nav-brand a{
right: 30%;
font-size: 1.5rem;
}
.nav .nav-items{
--gap: 2em;
position: fixed;
z-index: 1000;
inset: 0 0 0 30%;
flex-direction: column;
padding: min(20vh, 10rem) 2em;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
transform: translateX(100%);
}
.nav .nav-times[data-visible="true"]{
transform: translateX(0%);
}
.mobile-nav-toggle{
display: block;
position: absolute;
background: url(../assets/icon-hamburger.svg);
background-repeat: no-repeat;
border: 0;
z-index: 9999;
width: 2rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
font-size: 0;
}
}
/* ---X---navbar---X---*/
<!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>Computer Science Website</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<script src="./js/main.js" defer></script>
<button class="mobile-nav-toggle" aria-controls ="nav-items" aria-expanded ="false"><span class="sr-only">Menu</span></button>
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
CBlogging
</div>
<div>
<ul id = "nav-items" data-visible = "false" class="nav-items flex">
<li class ="nav-link">
<span aria-hidden="true">00</span>Home
</li>
<li class ="nav-link">
<span aria-hidden="true">01</span>Contact
</li>
<li class ="nav-link">
<span aria-hidden="true">02</span>Article
</li>
<li class ="nav-link">
<span aria-hidden="true">03</span>Home
</li>
</ul>
</div>
<!---
<div class="social text-gray">
F
I
T
Y
</div>
-->
</div>
</nav>
</body>
</html>
First step is change background-color like:
body {
background-color: #252525;
}
Now in button change font-size to example 17px:
.mobile-nav-toggle {
font-size: 17px;
}
Second and last step is change name of css atribute .nav-times to .nav-items:
.nav .nav-items[data-visible='true'] {
transform: translateX(100%);
}
That's it. Your welcome :)
Related
I have looked at the other questions that have been answered, tried them out myself and I still couldn't click on my burger and have the slide out menu. I was following a tutorial and it was turning out fine until I got to the JavaScript section of it. I'm not really too sure what I am doing wrong here. Looked around in the forum and tried all the solutions I could find for it to still not work.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
const app = () => {
navSlide();
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.townlogo{
display: flex;
justify-content: center;
margin-top: 20px;
mix-blend-mode: multiply;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: white;
margin-bottom: 20px;
}
ul.navigation{
display: flex;
justify-content: space-around;
width: 40%;
align-items: center;
margin-top: 20px;
background-color: (white);
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
ul.navigation li{
list-style: none;
}
ul.navigation a{
color: black;
text-decoration: none;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
li a:hover{
color: rgb(190 30 45);
}
.indexbody{
height: 100%;
margin: 0;
font-size: 17px;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
line-height: 1.8em;
color: rgb(65 57 61);
}
.img1, .img2{
position: relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Can be adjusted for mobile viewing*/
}
.img1{
background-image: url('../Images/lantern.jpg');
min-height: 600px;
}
.img2{
background-image: url('../Images/cookingcropped.jpg');
min-height: 400px;
}
.section{
text-align: center;
padding:50px 80px;
}
.section-mission{
background-color: rgb(65 57 61);
color:white;
}
.section-vision{
background-color: rgb(65 57 61);
color:white;
}
.menutext{
position: absolute;
font-size: 40px;
top: 50%;
width: 100%;
text-align: center;
color: white;
letter-spacing: 3px;
text-shadow: 3px 3px 3px black ;
}
.menutext .border{
border-style: solid;
border-width: 4px;
padding: 8px;
color: white;
box-shadow: 3px 3px 3px black;
text-decoration: none;
}
a.viewmenu:link{
text-decoration: none;
}
a.viewmenu:visited{
text-decoration: none;
}
a.viewmenu:hover{
background-color: transparent;
}
a.viewmenu:active{
text-decoration: none;
}
/*rectangle div contains copyright footer section*/
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 520px solid rgb(190 30 45) ;
border-right: 520px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 1024px){
.navigation{
width: 50%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.navigation{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 200px solid rgb(190 30 45) ;
border-right: 200px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head> <!--Header containing title,meta,and links-->
<title>ctowncuisine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.typekit.net/qsw5hiv.css">
<link rel="stylesheet" href="CSS/style.css"> <!--link reference to CSS stylesheet-->
</head>
<body>
<nav>
<div class="townlogo"> <!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="chinese restaurant logo">
</div>
<ul class="navigation"> <!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li><span>Reserve Table</span></li>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</nav>
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div>
</a>
<section class="section section-mission">
<h2 class="mission">Our Mission</h2> <!--This is the second heading containing: Our Mission section-->
<p>To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
</p> <!--Paragraph containing the mission statement of TOWN-->
</section>
<div class="img2"> <!--div classifying second image: cookingcropped.html-->
<span class="border">
</span>
</div>
<section class="section section-vision">
<h2 class="vision">Vision</h2> <!--header 2 containing a class for CSS: Vision-->
<p> <span style="color: rgb( 213 162 141);">TOWN</span> combines a variety of chinese cuisine to excite and delight our customers.
Our vision for the future is to create experiential dining that is more than just a night out.<br> We aim to bring quality and luxury across all aspects of our brand.
The approach of <span style="color: rgb( 213 162 141);">TOWN</span> is to develop our brand with the understanding of both our culture and consumer insights.<br> Within our vision always lives the promise of inspiring creativity, conversation and quality.
Our audience is a high-end clientele who values a dining experience.<br>The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
</p>
</section>
<footer>
<div class="rectangle"> <!--This section is the footer-->
© 2022 ctowncuisine.com designed by <span>Mariah Mendoza</span>
</div>
</footer>
<script> src="./js/app.js"</script>
</body>
</html>
It‘s hard to help because your code does not work yet. The burger has no size so we cannot click it.
Otherwise, your positioning and transition seems fine. But you’re hiding all menu items with opacity: 0. Since the menu is white, you will not see anything.
The current code has some accessibility issues, meaning it does not work well with assistive technology, which people with disabilities rely on. I improved them and I’ll explain them further down.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
if (nav.classList.toggle('nav-active')) {
// now it’s active
burger.setAttribute('aria-expanded', true);
nav.setAttribute('aria-hidden', false);
} else {
burger.setAttribute('aria-expanded', false);
nav.setAttribute('aria-hidden', true);
}
});
}
const app = () => {
navSlide();
}
.navigation {
list-style-type: none;
}
.navigation a {
display: block;
padding: .5em;
}
#media screen and (max-width: 1024px) {
.navigation {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
width: 40px;
}
.burger .line {
display: block;
background-color: black;
height: .2em;
margin: .4em 0;
}
.nav-active {
transform: translateX(0%);
}
}
<nav>
<div class="townlogo">
<!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="Town">
</div>
<button class="burger" id="burger" aria-expanded="false" aria-controls="navigation" onclick="navSlide()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<ul class="navigation" id="navigation">
<!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li>Order Online</li>
</ul>
</nav>
I was coding away on my newest project of learning css animation.
I've come a long way but for some reason when I scale my div-boks with a text element inside the text begins to shake when it appears.
What is the solution to this...
Btw I do care about effecienty as I will be rated on that for my project.
If javascipt is a better option and you know how to provide that please do
(best in the form of a tutorial page as I actually want to learn the code :D)
I will later use it to for responsive design so keep that if possible it would be nice to find a solution that cheaks that boks too
Here is the code:
function myFunction() {
var x = document.getElementById("topnav_id");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > window.innerHeight || document.documentElement.scrollTop > window.innerHeight) {
document.getElementById("topnav_id").style.top = "0px";
} else {
document.getElementById("topnav_id").style.top = "-300px";
}
}
#import url('https://fonts.googleapis.com/css2?family=Marck+Script&family=Oswald:wght#200;300;400;500;600;700&display=swap');
/* animations */
#media (prefers-reduced-motion: no-preference) {
.fa-down-long {
position:relative;
animation-name: hover-up-down;
animation-duration: 1s;
animation-iteration-count: infinite;
}
}
#keyframes hover-up-down {
0% {left:0px; top:30px;}
25% {left:0px; top:30px;}
50% {left:0px; top:50px;}
100% {left:0px; top:30px;}
}
/* */
#media (prefers-reduced-motion: no-preference) {
.title {
position:relative;
animation-name: opacity-apper;
animation-duration: 10s;
}
}
#keyframes opacity-apper{
0% {opacity: 0%; transform: scale(0.5);}
100% {opacity: 100%; transform: scale(1);}
}
* *:not(.topnav, #topnav){
margin: 0;
}
.background {
height: 100vh;
}
.background_header{
background-color: black;
background-image: url(/assets/placeholders/Front\ page.jpeg);
background-position: center;
}
.background_black{
background-color: black;
}
h1{
font-size: 8vw;
}
h2{
font-size: 3vw;
font-weight: 300;
}
.title {
display: grid;
grid-template-rows: 200px auto ;
font-family: 'Oswald', sans-serif;
color: white;
text-align: center;
padding-top: 30vh;
justify-content: center;
}
/* menubar */
#media screen and (min-width: 600px) {
.flex{
display: flex;
align-items: center;
column-gap: 2rem;
}
}
#topnav_id{
top: -300px;
transition: top 0.3s;
}
/* menubar responsvie */
.logo{
color: black;
width: 300px;
}
#media screen and (min-width:600px) {
.topnav{
position: fixed;
display: flex;
width: 100%;
z-index: 99;
}
}
#media screen and (max-width:600px) {
.topnav{
position: fixed;
display: block;
width: 100%;
z-index: 99;
}
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: rgb(0, 0, 0);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(255, 255, 255);
}
.dropdown-content a:hover {
background-color: rgb(243, 243, 243);
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(.active), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>Beta1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class=" background background_header">
<header class="header" id="header">
<div class="topnav" id="topnav_id">
<img class="logo" src="assets/Clean logo shite.svg" alt="Website_Logo">
<div class="flex">
Skills
About
Contact
<div class="dropdown">
<button class="dropbtn">Protfolio
<i class="fa fa-caret-down dropdown_icon"></i>
</button>
<div class="dropdown-content">
Design
School
Public
Social Media
</div>
</div>
☰
</div>
</div>
<div class="title">
<h1>I Make Visions Into Reality</h1>
<h2>Scroll to find More!</h2>
<i class="fa-solid fa-down-long" style="font-size: 5rem; padding-top: 4vh;"></i>
</div>
</div>
<div class="background background_video">
</div>
<div class="background background_white">
</div>
<div class="background background_black">
</div>
<script src="scripts/scroll.js"></script>
<script src="scripts/responsive.js"></script>
<script src="https://kit.fontawesome.com/fd59281c27.js" crossorigin="anonymous"></script>
</body>
</html>
<!-- Colors:
-----------------------------
New Black - #11121a
Orange - #11121a
Blue - #5865F2
Red - #ED4245
-----------------------------
******************************************
Font:
-----------------------------
Title - Oswald
-----------------------
font-family: 'Oswald', sans-serif;
---
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
-----------------------------
Fancy - Marck Script
-----------------------
font-family: 'Marck Script', cursive;
---
#import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
-----------------------------
Text - Arial
----------------------- -->
Thanks
Animations that scale or move position can cause "lag" or "stuttering", especially for low/mid end pc's. It's also recommended not to play too many animations at the same time since that can cause stuttering too. I have a portfolio website with a lot of animations which run fine on my personal pc, but can stutter on my work laptop. I'm thinking that's the issue in this case since your animation runs fine for me.
an article that might help:
https://www.keycdn.com/blog/animation-performance
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}
hamburger toggler animation doesn't work immediately after i refresh the page, it starts working after i hit it one time. the mainMenu appears without animation the first time i hit the openMenu. i dont understand how its possible working after the second time i hit it. there is something i am missing probably. why is this happening?
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.display = "flex";
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});
.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: none;
position: fixed;
top: 0;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# sourceMappingURL=style.css.map */
<!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://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li>lala</li>
<li>lala</li>
<li>lala</li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
If we are setting display to flex when opening for .mainMenu, but never when closing, we might as well set it to flex by default. This fixes the initial problem, but causes the menu to be open by default, so we can fix this by adding the same styling we add when closing, to the initial css (setting top: -100%; in .mainMenu).
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});
.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: flex;
position: fixed;
top: -100%;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# sourceMappingURL=style.css.map */
<!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://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li>lala</li>
<li>lala</li>
<li>lala</li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>