I tried to create two CSS files but it doesn't work. I have joined below my code, HTML, header CSS and Carousel CSS and javascript to create a responsive header.
From the screenshot I have sent can you see what's wrong? . enter image description here I wanted to create a responsive header with a burger menu and a slideshow carousel below the website header. There is also another problem, when I remove one of the two CSS file, the menu appears but the links have disapeared and there is only a burger menu. I really need some help to sort this out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
<script src="script.js"></script>
</head>
<body>
<header>
<nav class="navbar">
<div class="navbar-container container">
<div class="logo-img">
<img src="image/logo.jpg" width="200px" height="200px" alt="logo">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us </a></li>
<li><a href="#">Accordion menu</a></li>
<li><a href="#">Tab gallery</a></li>
<li><a href="#">Quiz</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<section aria-label="Newest Photos">
<div class="carousel"></div>
<button class ="carousel-button-prev">⇐</button>
<button class ="carousel-button-next">⇒</button>
<ul>
<li class= "slide"data-active>
<img src="image/woman-3597095_1280.jpg" alt="woman developer">
</li>
<li class= "slide">
<img src="image/web-design-3411373_1280.jpg" alt="web design">
</li>
<li class= "slide">
<img src="image/workspace-2443050_1280.jpg" alt="workspace">
</li>
<li class= "slide">
<img src="image/code-1076536_1280.jpg" alt="coding">
</li>
</ul>
</section
</body>
</html>
.logo-img {
float: right;
margin-right: 100px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #f6f6f6;
color: black;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-links {
display: flex;
margin-left: auto;
padding-right: 50px;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
margin-left: 50px;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: black;
padding: 10px;
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.navbar-links li:hover {
background-color: #8379ff;
border-radius: 15px;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: black;
border-radius: 10px;
}
@media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
body {
margin: 0;
padding: 0;
}
*,
*::before *::after {
box-sizing: border-box;
}
.carousel {
width: 100vw;
height: 100vh;
position: relative;
}
.carousel>ul {
margin: 0;
padding: 0;
list-style: none;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
}
.slide>img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.slide[data-active] {
opacity: 1;
}
.carousel-button {
position: absolute;
z-index: 2;
background: none;
border: none;
font-size: 4rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, .5);
cursor: pointer;
border-radius: .25rem;
padding: 0 .5rem;
background-color: rgba(0, 0, 0, .1);
}
.carousel-button:hover,
.carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}
.carousel-button:focus {
outline: 1px solid black;
}
.carousel-button.prev {
left: 1rem;
}
.carousel-button.next {
right: 1rem;
}
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
First, the fixed version of your code (click on Show code snippet, and then on Run button).
Explanations
Your original HTML markup had some errors - the first was an extra closing
div. The second was an unclosed</section. I left both of these inside HTML comments.To make things easier to replicate, I replaced your images with placeholders from placehold.co. Also, the contents of
style.css,style2.css, andscript.jswere simply placed in their respective sections within the Stackoverflow's editor. In order to make it clear where one CSS file ended and another began, I inserted CSS comments - for example/***** style.css *****/.I wrapped your original code in an event handler, which waits for the content to load, and then applies appropriate event handlers (
click, in your case). This isn't absolutely necessary.CSS fix for your missing hamburger icon and links just uses a
z-indexfor.toggle-buttonand.navbar-links- these were present, but were not visible, because the logo was overlapping with them. Providing thez-indexplaced your menu and the links on layers above the logo. In the code I provided, the fix is at the very bottom of the CSS section of Stackoverflow's code editor.To meet with your new requirements, I have added a
@mediaCSS query. Also, the original CSS near the very end ofstyle.csswas slightly changed - I've removed theflex-direction: columnfor your.navbar-links ul.