So, right now my header doesn´t look good on mobile. - The words overlap. They should remain in the same order... I tried to use line-height, which did not really change anything. Maybe you have some suggestions on how I can fix this problem. I am thankful for every suggestion!

[enter

.header {
    width: 100%;
    height: 7vh;
    padding: 0 5%;
    color: white;
    font-size: larger;
    background-color: black;
    z-index:100;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    line-height: 10px;
}

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    
}   

nav ul li {
    display: inline-block;
    list-style: none;
    margin: 10px 30px;
}

nav ul li a {
    text-decoration: none;
    color: white; 
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.Menü {
  color: white;
  text-decoration: none;
  margin-left: 40px;
}

<div  >
        <nav>
          <div>
          <a href="#Start"><Button > <input  type="image" src="/Images/Camellion Logo Website.png"></Button></a>
            </div>
            <ul>
                <a  href="/Galerie/Galerie.html">Galerie</a>
                <a  href="#Leistungen">Leistungen</a>
                <a  href="#Kontakt">Kontakt &amp; Standort   <i ></i></a>
            </ul>
        </nav>
    </div>

CodePudding user response：

   @media (max-width:767px) {
        * {
            box-sizing: border-box;
        }

    nav {
        flex-direction: column;
    }

    nav .Menu {
        margin-inline: 9px
    }
    }

good luck

CodePudding user response：

There is a thing in CSS called media queries. With media queries you can write for example CSS that only takes effect if screen is certain size.

For example

@media only screen and (min-width: 360px) and (max-width: 800px) {
    .header {
        height: 60px;
    }
}

Will set header height to 60px if the device that the page is opened on has screen width more then 360px and less then 800px.

Here is your code with couple adjustments

* { padding: 0; margin: 0; box-sizing: border-box; }

.header {
    width: 100%;
    padding: 0 20px;
    
    color: white;
    background-color: black;
    
    position: sticky;
    z-index:100;
    top: 0;
}

.navigation {
    margin: auto;
    max-width: 1200px;
    height: 80px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-icon { /* CSS to just to simulate Icon */
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 10px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.menu-item {
  color: white;
  text-decoration: none;
  white-space: nowrap; /* Will not let words to break to next line */
  font-size: 20px;
  font-weight: 700;
}

@media(max-width: 600px) {
  .header { padding: 0 10px; }
  .navigation { height: 60px; }
  .menu { gap: 20px;}
  .menu-item { font-size: 14px; }
}

@media(max-width: 400px) {
  .menu { gap: 10px;}
  .menu-item { font-size: 12px; }
}

<header  >
  <nav >
  
    <a href="#Start"><div  title="Menu icon / hamburger icon"></div></a>

    <div >
        <a  href="/Galerie/Galerie.html">Galerie</a>
        <a  href="#Leistungen">Leistungen</a>
        <a  href="#Kontakt">Kontakt &amp; Standort <i ></i></a>
    </div>
    
  </nav>
</header>

You can adjust your css even further. It's very popular to have icons with menu elements and on mobile view they become a bottom navigation bar with big icons and tiny text.