Question posted in 
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 reponsive 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')
})
2
Answers
Thank you for your answer, I am contacting you again because I think there might be in my code some CSS properties that are in conflict. As you have noticed, I have created 2 CSS files, one for the header and the other for the carousel. If I remove the link to the carousel CSS file, I can see the header. Thanks to your corrections I noticed that the burger menu is now clickable and the menu is displayed. However, The result, I would like to achieve is the navigation links should be horizontal on a computer. On mobile, the website menu should be the way you created it with a burger menu. Can you have also a look at the CSS properties of the carousel because it doesn't work. Thanks a lot for your help.
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.