Recently I uploaded my website online on Github and it came out with some display problems.
I have an Hamburguer menu icon (.toggle - in my code) for widths less than 1210px. When I click in the icon it works fine, displaying the submenu with the items, but when I click in the home button the main page loses the menu icon. I don´t know why.
I've tested it previously before it became public, and it was working fine.
The same thing happens when I click on the a-tower or muda items and then backwards to home, again the icon disappears.
I have already tried to research about that error in specific but didn´t find one particularly similar.
html:
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class= "toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
<a href="./index.html" >Home</a>
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
<a href="./Atower.html" >A-Tower</a>
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
<a href="#Contact" >Contact</a>
</li>
</ul>
</div>
css:
.header {
background-color: rgb(235, 223, 201);
z-index: 100;
top: 0px;
margin: 0 auto;
max-height: 5rem;
position: fixed;
border-bottom-style: double;
display: flex;
justify-content: space-between;
width: 100%
}
.menu-one {
display: flex
}
.logo {
display: flex;
}
.logo img {
height: 100%
}
.lettering {
display: flex;
justify-content: center;
align-items: flex-end;
padding-left: 1%;
}
h6 {
margin-bottom: 1.7%;
font-family: 'calibri';
font-weight: lighter;
letter-spacing: 0.1em;
font-size: 0.8em;
}
h6 .bolder {
font-weight: bold;
}
h6 .smaller {
font-weight: lighter;
}
.toggle {
display: none;
}
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 1px;
font-size: 20px;
color: black
}
#menu-two{
display: flex;
}
.hide {
display: none;
}
li {
list-style: none;
padding: 1em
}
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle{
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
js:
$(document).ready(() => {
$('.toggle, .item').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
})
Note: when I resize my browser in my desktop, when it gets smaller, between 870px and 560px the menu burguer stays on the right, and disappears during these dimensions periods.
I have checked your site, it's not a jquery issue. The hamburger icons disappear because of the logo property "flex".
Replace this CSS on your stylesheet, I will fix your issue.
.logo {
display: flex;
flex: 1;
}
when your hamburger menu appears, it's got CSS display: block property so it failed to counter the display: flex.
Let me know Please.
A couple things are going on here. First, some of the links are redirecting you to a new page, without the header code. Second, you have your first click event set up to respond to .toggle and .item. .item refers to your menu items, so you want to remove that target.
$(document).ready(() => {
$('.toggle').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
$('ul#menu-two > li > a').click(function(e){
e.preventDefault();
});
});
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle {
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
Home
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
A-Tower
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
Contact
</li>
</ul>
</div>
Related
I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!
I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>
I want to change the color of the hamburger menu when the menu is opened. When the user clicks on the hamburger menu, the color should change from black to white and and vice versa. I´m not using a button for the menu but three spans. I haven't tried anything yet, because I´m pretty new and espacially js is still very difficult for me. Thanks for helping me!
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
});
document.querySelector(".nav.link").forEach((n) =>
n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
})
);
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 1000px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 0px;
gap: 0;
flex-direction: column;
background-color: black;
width: 100%;
text-align: center;
}
.nav-item {
margin: 16px 0;
display: flex;
flex-direction: column;
}
.nav-menu.active {
left: 0;
}
.menu a {
color: white;
}
}
<nav id="nav" class="navbar">
<ul class="nav-menu">
<li id="current" class="nav-item">
<a
href="file:///C:/Users/.../index.html"
class="nav-link"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
class="nav-link"
>About</a
>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
To change the color of the bars, you just need to add this to your css:
.hamburger.active .bar {
background-color: gray;
}
You wrote that you want the color to change from white to black and vice versa, but i wouldnt recommend you that, because you cant see the white bars on a white background. This is why i set the color to gray in this example.
Also, you made a mistake with the layering. You can see the hamburger infront of the menu when its open. To fix this, just set z-index to 2:
.nav-menu {
z-index: 2;
}
Here's a full example:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
});
document.querySelector(".nav.link").forEach((n) =>
n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
})
);
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 1000px) {
.hamburger {
display: block;
}
.hamburger.active .bar {
background-color: gray;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 0px;
gap: 0;
flex-direction: column;
background-color: black;
width: 100%;
text-align: center;
z-index: 2;
}
.nav-item {
margin: 16px 0;
display: flex;
flex-direction: column;
}
.nav-menu.active {
left: 0;
}
.menu a {
color: white;
}
}
<nav id="nav" class="navbar">
<ul class="nav-menu">
<li id="current" class="nav-item">
<a
href="file:///C:/Users/.../index.html"
class="nav-link"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
class="nav-link"
>About</a
>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
I want to make something like this, just like in the code I wrote, but the problema is that when the animation is back to it's original position, the links stays there but invisible, and I want them to stay in display: none :(
When I always try to make that those links stays in display: none the animation looks like that does not want to work...
HTML
<body>
<nav>
<div class="hamburger">
<span class="hamburger_stick stick1"></span>
<span class="hamburger_stick stick2"></span>
<span class="hamburger_stick stick3"></span>
</div>
<ul class="nav_list_container">
<a class="nav_list_link link1" href="">Servicios</a>
<a class="nav_list_link link2" href="">Contacto</a>
</ul>
</nav>
<header>
<div>
<h1>Eliana Moura</h1>
<h2>Enfermera Profesional Matriculada</h2>
<p>Más de 10 años apoyando y sanando pacientes en la Ciudad de Santa Fe.</p>
<p>Y hoy, ¿cómo te sentís? ¿En qué te puedo ayudar?</p>
Leer más
</div>
<div>
<img src="" alt="">
</div>
</header>
CSS
#import "standar";
$color1: #dcf1fb;
$color2: #f8b14c;
$color3: #777887;
$color4: #384e5e;
$typo: 'Ubuntu', sans-serif;
* {
font-family: $typo;
}
body {
width: 100vw;
height: 100vh;
background-color: $color1;
}
header {
background-color: $color1;
}
nav {
display: flex;
flex-direction: row-reverse;
width: 100%;
}
nav .nav_list_container {
display: flex;
flex-direction: row-reverse;
width: 100%;
}
nav .nav_list_container .nav_list_link {
margin: 10px 5px;
padding: 10px 8px;
text-transform: uppercase;
font-weight: bold;
opacity: 0;
transform: translateX(20px);
transition: all .2s ease-in-out;
}
.hamburger {
width: 40px;
height: 30px;
line-height: 5px;
padding: 15px 20px;
}
.hamburger .hamburger_stick {
display: inline-block;
width: 100%;
height: 3px;
margin: auto;
background-color: #000000;
transition: all .2s ease-in-out;
}
.selected {
transform: rotate(-45deg) translate(-3px, 8px);
}
.selected2 {
transform: translateX(20px); opacity: 0;
}
.selected3 {
transform: rotate(45deg) translate(-3px, -8px);
}
.selected4 {
opacity: 1 !important;
display: initial !important;
transform: translateX(0) !important;
}
JS
$(document).ready(function() {
var selected = false
$(".hamburger").click(function() {
$(".stick1").toggleClass("selected")
$(".stick2").toggleClass("selected2")
$(".stick3").toggleClass("selected3")
$(".nav_list_link").toggleClass("selected4")
})
})
im working on a website for school.
The problem is: My hamburger menu is not opening (btw it only shows up on small screens).
Does anyone know why?
Im using HTML5 (CSS3&Javascript)
Thank you in advance.
HTML code (for the menu)
<body>
<nav>
<header>
<div class="logo">
<h4>Daan</h4>
</div>
</header>
<ul class="nav-links">
<li>
Home
</li>
<li>
5 grootste steden
</li>
<li>
Over mij
</li>
<li>
Opmaak
</li>
<li>
Jquery
</li>
<li>
Canvas
</li>
<li>
GIMP
</li>
<li>
Schoolexamen
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
CSS3 code (to transform the menu to a hamburger one on small screens)
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #2E4053;
font-family: 'Poppins', sans-serif;
}
.logo{
color: slategrey;
letter-spacing: 5px;
font-size: 20px;
font-family: 'Cookie';
}
.nav-links{
display: flex !important;
justify-content: space-around;
width: 80%;
padding:30px;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(247, 245, 248);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1000px){
body{
overflow: hidden;
}
.nav-links{
position: absolute;
right: 0rem;
height: 100%;
top: .75rem;
background-color: #2E4053;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 1;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.toggle .line1{
transform: rotate(-45deg) translate(0px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-14px);
}
JS code
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li')
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
burger.classList.toggle('toggle');
});
}
navSlide();
Steps to debug:
Have you linked you JavaScript file?
< script src="yourFileName.js"></ script>
Have you made sure all appropriate areas in JS have a closing (;)? It seems like you had one missing here.
const navLinks = document.querySelectorAll('.nav-links li');
Have you linked to your css?
< link rel="stylesheet" href="#yourFileName.css">
These may be the issues you are facing if you have functionality in your provided link.
Also spaces were added in front of link, script and script closing to have them viewable you can backspace in your editor.
I am creating an eCommerce site. I have a header and a sidebar. And then I have the main body section. In the main body section, I have a heading for Featured Products. And then I have some images below the Featured Products heading which I will replace with actual images. But when I add the image, and then I also add the Add the Add to Cart button below each image. But when I add a button, it is coming right to the image instead of below it. Even though I have a line break tag.
Some help will be really appreciated
Thanks
The index.php
<?php
require_once 'Partials/header.php';
?>
<br><br><br><br>
<link rel="stylesheet" type="text/css" href="Styles/Style.css">
<div class="main_wrapper">
<?php
require_once 'Partials/sidebar.php';
?>
<!--The main body section start here-->
<div class="main">
<!--Featured Products List Starts Here-->
<h2 style="text-align: center;">Featured Products</h2>
<div class="container">
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
</div>
<h2 style="text-align: center;">New Arrivals</h2>
<div class="container 2">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Clothes</h2>
<div class="container 3">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Brands</h2>
<div class="container 4">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: auto;
justify-content: space-between;
}
.container > img {
display: block;
margin-top: 5px;
}
</style>
<!--Featured Products List Ends Here-->
<button name="Black">Black</button>
</div>
<!--The main body section ends here-->
<!--Back To Top Coding Starts Here-->
<head>
<style>
#back-to-top-btn{
display: none;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #fff;
color: #333;
cursor: pointer;
outline: none;
border: 3px solid #333;
border-radius: 50%;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-property: background-color, color;
}
#back-to-top-btn:hover, #back-to-top-btn:focus{
background-color: #333;
color: #fff;
}
/* Animations */
.btnEntrance {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: btnEntrance;
}
/* zoomIn */
/* #keyframes btnEntrance {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 1;
}
} */
/* fadeInUp */
#keyframes btnEntrance {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.btnExit {
animation-duration: 0.25s;
animation-fill-mode: both;
animation-name: btnExit;
}
/* zoomOut */
/* #keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
} */
/* fadeOutDown */
#keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
</style>
</head>
<button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
<script src="js/Back_To_Top.js"></script>
<!--Back To Top Coding Ends Here-->
</div>
</body>
</html>
And then this is the header.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home - Diamond Collections</title>
<script src="https://kit.fontawesome.com/1cde82a3ba.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
/*background-image: radial-gradient(circle, red, yellow, green);*/
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.content {
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
height: 76px
}
.logo {
grid-column: 2 / 3;
position: absolute;
height: 200px;
//transform: scale(2,2);
}
nav {
// all: unset; /* this causes issues with Edge, since it's unsupported */
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: 1.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
h1 {
margin:0
}
.logo a {
display: flex;
justify-content: center;
}
.logo img {
height: 74px;
margin-top: 1.1px;
}
</style>
</head>
<body>
<header>
<h1 class="logo"><img src="Images/Logo5.JPG"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<form action="" method="" class="search" style="margin-top: 24px;">
<input type="" name="search" placeholder="Search..." style="padding: 5px; font-size: 15px">
</form>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
And then this is the sidebar.php
<style>
.sidenav {
height: 100%;
width: 160px;
margin-top: 6.1%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<div class="sidenav">
New Arrivals
Featured
Clothes
Brands
</div>
I reviewed your code and the reason you're not getting the result you want is because you put everything inside the div CONTAINER.
You put IMG BUTTON IMG BUTTON IMG BUTTON IMMG BUTTON so when the code runs it displays everything in a straight line as it actually is.
in order to get the result you want you need to structure your code with more divs inside the container div.
EXAMPLE:
<div class="container">
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
</div>
Let me know if you need more help.
And P.S keep your style code inside the style.css and not html files.