Css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
position: fixed;
width: 100%;
}
nav{
display: flex;
align-items: center;
background-color: gainsboro;
padding: 20px 10px;
justify-content:space-around ;
}
nav > .navbar{
display: flex;
list-style: none;
gap: 10px;
}
a{
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<nav>
<a href="" class="nav-brand">MyWebsite</a>
<ul class="navbar">
<li class="nav-item">Menu 1</li>
<li class="nav-item">Menu 2</li>
<li class="nav-item">Menu 3</li>
</ul>
<a href="">Logo</a>
</nav>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quas dolor deleniti voluptatem animi! Doloribus, ratione ipsam adipisci eius odit neque laudantium fuga quia sequi ab? Voluptatum eligendi odit debitis fugiat iste libero nemo! Ipsa architecto ut, eum aut quas nobis aliquid eveniet corrupti non facilis minima distinctio, modi exercitationem molestiae! Ipsa laborum ex, iste eaque nam doloremque quas, eligendi suscipit nemo voluptatibus totam molestias culpa quo. Autem molestias maiores tenetur pariatur dignissimos sequi expedita et ipsa? Quos magnam error inventore reiciendis excepturi nam minima voluptas? Reprehenderit maiores at eveniet debitis consectetur et hic enim amet nihil ad, corrupti facere! Quasi porro adipisci voluptates. Eos mollitia illo sint deleniti dolores, quis ex saepe esse rem vitae explicabo, tenetur ducimus. Est, hic quae perferendis repellendus illum asperiores inventore ad officiis aliquam ipsa. Inventore sit, suscipit aperiam omnis voluptate nemo! Voluptatibus repellat itaque provident qui porro sit nihil voluptas magnam fuga ipsum velit at animi cumque est, alias fugit rem amet minima quaerat quos id a totam. Ipsam ullam adipisci possimus aperiam. Repudiandae dolorum nihil, optio, rem vitae ut, perspiciatis fugit enim excepturi soluta quasi quas eaque. Repellat autem possimus atque officia doloribus. Aut dolores soluta velit reiciendis molestiae enim deleniti facilis, numquam quos facere voluptate neque alias ut, mollitia itaque quisquam voluptatum possimus ipsam quidem fugit temporibus eveniet? Quasi nihil ipsa soluta nobis dignissimos, fugit suscipit qui libero natus doloremque quisquam esse expedita unde quam et sed quae odio perspiciatis fuga earum nemo neque? Assumenda voluptatum magni perferendis debitis nam amet, ut minima itaque hic! Rerum dolorum odit excepturi minima ullam dolore eaque unde facilis vitae similique laboriosam, saepe, harum magnam quisquam nobis veritatis nam neque maxime sit amet sunt. Qui molestiae sunt nisi atque nulla perspiciatis autem hic, fugiat architecto voluptatum repellat quo odio magni commodi odit quae quasi voluptates illum. Nobis quis illum debitis sit expedita assumenda dolorem perferendis dolor necessitatibus nam magnam exercitationem et voluptates ex eveniet repellendus, quod deleniti veritatis, aspernatur magni aut sint ullam mollitia. Nostrum accusantium est, quod molestiae amet natus corrupti ipsum provident, earum dolores quos, dolore labore! Quasi impedit odio quod id iusto deleniti non magni molestiae fugiat minima mollitia atque commodi quos corrupti, eaque suscipit voluptate tempora placeat ducimus fuga iste nostrum provident repudiandae? Quis temporibus aperiam eius reprehenderit nisi, nihil perspiciatis necessitatibus sed sunt doloremque, fuga accusantium culpa distinctio quasi voluptates modi cupiditate est at ratione vero repellendus itaque quidem alias. Molestias necessitatibus pariatur delectus fugit dolores deserunt sapiente voluptatibus culpa iste hic natus quis, iure error officia, sequi dolorem consectetur veniam laboriosam explicabo accusantium, alias voluptates a quo. Modi, ex corporis eum debitis accusantium, ipsam repellat corrupti, ullam placeat amet ducimus velit voluptas totam laboriosam. Perferendis eaque maiores excepturi commodi provident itaque corporis! Ut a delectus sapiente, maxime ratione similique esse fuga illo, commodi beatae deserunt eum necessitatibus provident omnis explicabo. Natus suscipit numquam, non optio quis doloribus eius voluptatum iure mollitia possimus rerum explicabo dicta maiores? Ex veritatis ullam quam ab, veniam ad atque vero ea eius expedita assumenda amet vel? Error sed dolor repudiandae molestiae asperiores, impedit deserunt debitis illo incidunt, sint cum maiores assumenda nesciunt cumque non et, minima quibusdam corrupti. Consequuntur voluptas hic asperiores quia sunt, atque quo quaerat ad, ex dolor deleniti aliquam voluptatum modi? Eveniet reiciendis exercitationem ipsa praesentium, repudiandae cumque totam vero, nam minus blanditiis sit reprehenderit numquam tenetur porro modi facilis quisquam optio voluptatem consequatur. Molestiae repudiandae non molestias hic voluptatum voluptatibus et. Doloribus ducimus maiores sed voluptate! Laudantium mollitia exercitationem consequuntur assumenda illum illo id provident eius earum ex. Id ratione neque dicta, autem nihil harum, non quam deleniti sunt dignissimos beatae possimus aut vero tenetur. Amet doloribus, totam, mollitia sed dolorum esse modi sint libero aut at ratione cum, cumque velit. Rerum laudantium numquam velit? Eligendi molestiae deserunt quaerat non cumque at suscipit error deleniti unde, consequuntur est earum. Ipsam ipsum, unde aperiam adipisci, nihil dolorem magnam nemo laboriosam asperiores labore libero, praesentium illo quibusdam at laudantium deserunt quo harum maxime molestias quos recusandae. Porro cum obcaecati quam id nam. Nobis veniam vel ipsum, voluptatibus non enim laboriosam earum eos, amet eligendi aliquam, dolor totam officiis repellendus vitae ab voluptates eveniet est placeat eius consequatur nesciunt voluptas! Magnam omnis quas totam accusantium maiores minima, nemo neque delectus voluptatum iste illo animi obcaecati inventore, soluta, labore consequatur recusandae harum architecto? Ad nesciunt, facilis consequatur, modi aspernatur dicta tempora quas necessitatibus cumque inventore rerum consequuntur, assumenda repellendus exercitationem placeat eum voluptate odit sunt pariatur aperiam laborum sequi molestias quo. Culpa facere aspernatur dolor error, quibusdam repellendus ipsam rerum eum necessitatibus amet corrupti aliquam. Eos recusandae corporis officia labore sed distinctio at maiores dolorem similique, doloribus ea totam aspernatur laborum adipisci, quasi reiciendis vero exercitationem ducimus amet excepturi architecto quia? Quas fuga tempore amet repellat excepturi, corrupti quo, totam in magnam odit sunt beatae quidem. Assumenda explicabo harum ducimus nulla molestias eum accusamus vel asperiores odio dolorum obcaecati eius quam labore et, alias porro dolorem ut mollitia! Dolorum aspernatur sit blanditiis inventore nisi quaerat ut possimus facere saepe. Minus perferendis quae reprehenderit ducimus ab aut id vero, architecto quaerat repellat impedit rem facere? Doloremque, pariatur laudantium totam voluptates veritatis molestiae explicabo unde. Aspernatur autem, eveniet ad hic delectus suscipit consequuntur, id dolor odit, accusantium blanditiis quae voluptate excepturi! Maxime dolor temporibus quaerat labore? Vel error quibusdam, sequi culpa blanditiis repellendus repudiandae eius modi velit labore architecto id eos iusto aliquid corrupti. Rerum sit consequatur repellat. Est architecto quasi, suscipit, ducimus nihil qui fuga ea saepe, fugiat aliquam officiis explicabo nobis hic repellat consectetur accusamus voluptatum! Beatae modi illo ullam fuga debitis eveniet animi. Nemo quasi perspiciatis hic voluptatem quibusdam! Quam placeat veniam recusandae sunt ad unde repellendus blanditiis, optio ducimus totam facilis quaerat neque sequi, et eveniet maiores quidem harum temporibus similique nihil. Ratione quasi delectus iure tenetur optio laborum accusantium modi commodi doloribus voluptatum iste eum tempore a molestiae eos eligendi, officiis odit. Delectus eius tenetur nobis modi veniam? Possimus quos harum, quas dolore nostrum eaque aut, vel voluptates, officia maxime autem?
</body>
</html>
Geser ke samping untuk lihat kode lengkap