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.js
were 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-index
for.toggle-button
and.navbar-links
– these were present, but were not visible, because the logo was overlapping with them. Providing thez-index
placed 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.