lambdaschmied2/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <strong>My Blog</strong>

        <nav>
            <ul>
                <li><a href="/">About</a></li>
                <li><a href="/">Blog</a></li>
                <li><a href="/">Contact</a></li>
            </ul>

            <details>
                <summary aria-label="open mobile menu"></summary>

                <ul>
                    <li><a href="/">About</a></li>
                    <li><a href="/">Blog</a></li>
                    <li><a href="/">Contact</a></li>
                </ul>
            </details>
        </nav>
    </header>

    <main>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus pellentesque neque, sit amet maximus urna
        porttitor vel. Mauris interdum turpis id mollis porta. Suspendisse potenti. Vestibulum ante ipsum primis in
        faucibus
        orci luctus et ultrices posuere cubilia curae; Maecenas ut massa sem. Duis dui arcu, gravida vitae lacinia a,
        suscipit
        id odio. Sed eu ipsum viverra, aliquet justo id, aliquet ligula. Donec sodales lorem quis condimentum aliquet.
        Vestibulum vitae accumsan ex. Maecenas feugiat neque lorem, sit amet mollis ligula porttitor in. Lorem ipsum
        dolor sit
        amet, consectetur adipiscing elit.
    </main>

</body>

</html>

## style.css
/*
  don't forget to add your own menu/close icons and replace the URLs in this file
  this example uses svg icons from https://ionic.io/ionicons
*/

body {
    margin: 0;
    font-family: sans-serif;
    line-height: 2;
}

main {
    /** [1.1] **/
    /* don't forget to increase vertical padding with fixed navbar */
    padding: 1rem 1rem;
    height: 200vh;
    background-color: antiquewhite;
}

header {
    background-color: aliceblue;
    display: flex;
    justify-content: space-between;

    /** [1.2] **/
    /** toggle sticky header **/
    position: fixed;
    width: 100%;
}

header>* {
    padding: 1rem;
}

header>strong {
    font-size: 1.5rem;
    line-height: 1;
}

header ul {
    display: flex;
    list-style: none;
    gap: 1rem;
}

/* hide details containing mobile menu when page is wider then 991px */
nav>details {
    display: none;
}

nav>details>summary {
    cursor: pointer;
    list-style: none;
    display: block;
    text-align: end;
    height: 2rem;
    /* slight transition */
    transition: margin-bottom 150ms ease-out;
}

/* add margin for slight transition */
nav>details[open]>summary {
    margin-bottom: 1rem;
}

/* custom image for mobile menu */
nav>details>summary::after {
    content: '';
    background-image: url(img/menu.svg);
    background-size: 2rem 2rem;

    display: inline-block;
    width: 2rem;
    height: 2rem;
}

/* alternative image for open mobile menu */
nav>details[open]>summary::after {
    background-image: url(img/close.svg);
}

nav>details>ul {
    flex-direction: column;
    align-items: end;
    margin: 0;

    /** [2] **/
    /** toggle full page menu **/
    /* height: calc(100vh - 64px); */
}

/* when page is smaller then 991px */
@media (max-width: 991px) {
    /* header {
        align-items: start;
    } */

    /* hide desktop menu */
    nav>ul {
        display: none !important;
    }

    /* show mobile menu */
    nav>details {
        display: block !important;
    }
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<header>
	<strong>My Blog</strong>

	<nav>
	<ul>
	<li><a href="/">About</a></li>
	<li><a href="/">Blog</a></li>
	<li><a href="/">Contact</a></li>
	</ul>

	<details>
	<summary aria-label="open mobile menu"></summary>

	<ul>
	<li><a href="/">About</a></li>
	<li><a href="/">Blog</a></li>
	<li><a href="/">Contact</a></li>
	</ul>
	</details>
	</nav>
	</header>

	<main>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus pellentesque neque, sit amet maximus urna
	porttitor vel. Mauris interdum turpis id mollis porta. Suspendisse potenti. Vestibulum ante ipsum primis in
	faucibus
	orci luctus et ultrices posuere cubilia curae; Maecenas ut massa sem. Duis dui arcu, gravida vitae lacinia a,
	suscipit
	id odio. Sed eu ipsum viverra, aliquet justo id, aliquet ligula. Donec sodales lorem quis condimentum aliquet.
	Vestibulum vitae accumsan ex. Maecenas feugiat neque lorem, sit amet mollis ligula porttitor in. Lorem ipsum
	dolor sit
	amet, consectetur adipiscing elit.
	</main>

	</body>

	</html>
	/*
	don't forget to add your own menu/close icons and replace the URLs in this file
	this example uses svg icons from https://ionic.io/ionicons
	*/

	body {
	margin: 0;
	font-family: sans-serif;
	line-height: 2;
	}

	main {
	/ [1.1] /
	/* don't forget to increase vertical padding with fixed navbar */
	padding: 1rem 1rem;
	height: 200vh;
	background-color: antiquewhite;
	}

	header {
	background-color: aliceblue;
	display: flex;
	justify-content: space-between;

	/ [1.2] /
	/ toggle sticky header /
	position: fixed;
	width: 100%;
	}

	header>* {
	padding: 1rem;
	}

	header>strong {
	font-size: 1.5rem;
	line-height: 1;
	}

	header ul {
	display: flex;
	list-style: none;
	gap: 1rem;
	}

	/* hide details containing mobile menu when page is wider then 991px */
	nav>details {
	display: none;
	}

	nav>details>summary {
	cursor: pointer;
	list-style: none;
	display: block;
	text-align: end;
	height: 2rem;
	/* slight transition */
	transition: margin-bottom 150ms ease-out;
	}

	/* add margin for slight transition */
	nav>details[open]>summary {
	margin-bottom: 1rem;
	}

	/* custom image for mobile menu */
	nav>details>summary::after {
	content: '';
	background-image: url(img/menu.svg);
	background-size: 2rem 2rem;

	display: inline-block;
	width: 2rem;
	height: 2rem;
	}

	/* alternative image for open mobile menu */
	nav>details[open]>summary::after {
	background-image: url(img/close.svg);
	}

	nav>details>ul {
	flex-direction: column;
	align-items: end;
	margin: 0;

	/ [2] /
	/ toggle full page menu /
	/* height: calc(100vh - 64px); */
	}

	/* when page is smaller then 991px */
	@media (max-width: 991px) {
	/* header {
	align-items: start;
	} */

	/* hide desktop menu */
	nav>ul {
	display: none !important;
	}

	/* show mobile menu */
	nav>details {
	display: block !important;
	}
	}