<!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>Learn building a website with javascript</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
  <header>
      <nav class="nav">
          <img class="logo" src="images/new logo.png" alt="logo">

          <button class="toggle navbar__toggle" id="mobile-menu"></button>   
          <ul class="navbar__menu">
              <li class="navbar__item">
                  <a href="#shop" class="navbar__links" id="shop-page">Shop</a>
              </li>
            <li class="navbar__item">
                   <a href="#biljetter" class="navbar__links" id="biljetter-page">Biljetter</a>
            </li>    
            
            <li> 
                <a href="#" class="dropbtn">teams</a>
                <ul class="dropdown-content">
                   <li><a href="#ett leksands if" class="navbar__btn" id="ett leksands if">Ett Leksands IF</a></li>                                                                                                                                                                                                                        
                   <li><a href="#ett leksands if" class="navbar__btn" id="ett leksands if">Ett Leksands IF</a></li>                                                                                                                                                                                                                       
                   <li><a href="#ett leksands if" class="navbar__btn" id="ett leksands if">Ett Leksands IF</a></li>                                                                                                                                                                                                                        
                </ul>    
                </li>
        
            <li>
                <button class="cta">
                    <i class="fa-solid fa-magnifying-glass"></i> Sök </button>
            </li>
          </ul>
      </nav>
  </header>
  <section>

  </section>
</body>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;;
}

:root {
    --max-width: 1380px;
  }

.header {
    box-shadow: rgb(254, 254, 255); 
}

.nav {
    display: flex;
    z-index: 99;
    top: 0;
    background: #7645ff;
    align-items: center;
    max-width: var(--max-width);
    margin: 0;
    padding: 0;
    
}
.navbar__menu {
     display: flex;
     flex: 1 0 0;
     margin: 0;
     padding: 0;
     list-style: none;
     flex: 1 0 0;
     align-items: center;
     position: relative;
     top: 0;
     transition: all 0s;
}
.navbar__menu a {
     display: block;
     padding: 5px 10px;
     color: #fff;
     text-decoration: none;
     margin-right: 5vw;
     list-style: none;
}
    .dropdown,
    .dropdown ul {
    position: relative;
    z-index: 99;
    display: flex;
    background: blue;
}

.dropdown li {
    position: relative;
    display: flex;
    flex-direction: column;
}

.dropbtn {
 /* background-color: yellow; */
    color: #fff;
    padding: 1rem;
    font-size: 1rem;
    position: relative;
    z-index: 2;
    text-decoration: none;
/*  border-right: 1px solid #fff; */
}



.logo {
    margin-top: 20px;
    margin-left: 20px;
    cursor: pointer;
}

.navbar__toggle {
    display: none; 
}



.navbar__menu a:hover {
    text-decoration: transparent;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.