Nav links inline with nav header

Tell us what’s happening:

I have passed this project but just some styling help please.

My nav bar, when on a screen smaller than 1000px. will change from being fixed to the left., to being fixed to the top. when it fixes to the top, i cant seem to get my nav links to be inline with the nav header.

Your code so far

nav{
  color:#ffffff;
  padding:20px;
  height:100%;
  width:100px;
  display:flex;
  position:fixed;
  flex-direction:column;
  background-color:#03045e;
  font-size:1.5rem;
  overflow:hidden;

}

@media (max-width: 1000px) {
  nav{
    position:fixed;
    width:100%;
    height:40px;
    display:flex;
    flex-direction:row;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Please post all your HTML and CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel"stylesheet" href="./styles.css">
<title>Bali Trip Planner</title>
  </head>
  <body>
    <main id="main-doc">
      <nav id="navbar">
  <header>Bali Trip Planner</header>
        <a class="nav-link" href="#about_bali">About Bali</a>
        <a class="nav-link" href="#areas">Areas</a>
        <a class="nav-link" href="#trips">Trips</a>
        <a class="nav-link" href="#where_to_eat">Where to eat</a>
        <a class="nav-link" href="#code">code</a>
        </nav>
        
      <section class="main-section" id="about_bali">
      

        <header>About Bali</header>
        <p>
Welcome to Bali - the Island of the Gods, a tropical paradise that captivates the hearts of all who visit. Immerse yourself in the rich tapestry of Balinese culture, breathtaking landscapes, and warm hospitality. Here's a glimpse of what makes Bali a truly enchanting destination:</p>
<ul>
  <li>Cultural Marvels</li>
  <li>Lush Landscapes</li>
  <li>Adventurous Escapades</li>
  <li>Balinese Cuisine</li>
  <li>Warm Hospitality</li>
      </section>

      <section class="main-section" id="areas">
        <header>Areas</header>
        <p>Bali is a mosaic of diverse landscapes and unique cultural experiences, each region offering its own distinct charm. Whether you seek the vibrant energy of the south or the serene tranquility of the central highlands, Bali caters to every traveler's taste. Explore the island's various regions:</p>

        <h3> South Bali - The Beach Enclave:</h3>
        <ul>
          <li>Home to the bustling nightlife and vibrant atmosphere of Kuta, Seminyak, and Legian.</li>
          <li>Famous surf breaks at Uluwatu, Bingin, and Padang Padang for wave enthusiasts.</li>
          <li>Luxury resorts and beach clubs line the coast, providing a perfect blend of relaxation and excitement.</li>
          </ul>

          <h3>Ubud - The Cultural Heart</h3>
          <ul>
          <li>Nestled in the lush central highlands, Ubud is a haven for art, culture, and spirituality.</li>
          <li>Explore art markets, museums, and traditional performances showcasing Balinese creativity.</li>
          <li>Surrounded by rice terraces and scenic landscapes, it's a retreat for those seeking tranquility.</li>
          </ul>

          <h3>East Bali - Authentic Traditions</h3>
            <ul>
              <li>A gateway to Bali's ancient traditions and historical sites.</li>
              <li>Besakih Temple, the largest and holiest temple complex, resides in this region.</li>
              <li>Candidasa and Amed offer quieter coastal escapes with authentic local experiences.</li>
            </ul>  
      </section>

      <section class="main-section" id="trips">
        <header>Trips</header>
<div class="trips">
        <h3>Discover Bali's Captivating Day Trips and Islands:</h3>
        <p><strong>Nusa Penida:</strong></p> <p>Venture to the rugged beauty of Nusa Penida, where dramatic cliffs, crystal-clear waters, and pristine beaches await. Witness the iconic Kelingking Beach, the natural infinity pool of Angel's Billabong, and the mesmerizing Broken Beach. Snorkel with vibrant marine life at Crystal Bay, making this day trip an unforgettable island escapade.</p>
        </div>

<div class="trips">
        <p><strong>Nusa Lembongan:</strong></p>
        <p>Just a short boat ride from Bali, Nusa Lembongan beckons with its laid-back charm. Relax on Dream Beach's white sands, experience the thrilling Devil's Tear cliffs, and explore the mangrove forests. With water activities like snorkeling and paddleboarding, Nusa Lembongan promises a day of tropical bliss.</p>
        </div>

<div class="trips">
        <p><strong>Ubud and Tegalalang Rice Terraces:</strong></p>
        <p>Immerse yourself in the cultural heart of Bali with a day trip to Ubud. Visit the Monkey Forest, explore the art markets, and witness traditional dance performances. Head to the iconic Tegalalang Rice Terraces for a scenic retreat, where cascading green landscapes create a breathtaking backdrop.</p>
        </div>

<div class="trips">
        <p><strong>Mount Batur Sunrise Trek and Hot Springs:</strong></p>
        <p>For the adventurous souls, a predawn trek up Mount Batur promises a breathtaking sunrise over the volcanic landscapes. Afterward, unwind at the natural hot springs in Toya Bungkah, surrounded by the beauty of Lake Batur, creating a perfect blend of adventure and relaxation.</p>
        </div>
      </section>

      <section class="main-section" id="where_to_eat">
        <header>Where to eat</header>

        <h2>Delight Your Palate in Bali</h2>

    <p>Discover a culinary journey through Bali's diverse flavors. From traditional warungs to chic beachside cafes, the island offers a tantalizing array of dining options to satisfy every palate.</p>

    <div class="restaurant">
        <h3>Local Warungs</h3>
        <p>Immerse yourself in the authentic flavors of Bali by dining at local warungs. Savory Nasi Goreng, succulent Satay, and refreshing Es Campur are just a taste of the delights awaiting you.</p>
    </div>

    <div class="restaurant">
        <h3>Beachside Cafes</h3>
        <p>Enjoy a laid-back dining experience at Bali's beachside cafes. Relish fresh seafood while the sound of the waves serenades you. These cafes offer a perfect blend of delicious cuisine and breathtaking views.</p>
    </div>

    <div class="restaurant">
        <h3>Fine Dining</h3>
        <p>Indulge in exquisite culinary creations at Bali's fine dining establishments. Renowned chefs curate menus that combine local ingredients with international flair, promising a gastronomic experience like no other.</p>
    </div>

    <div class="restaurant">
        <h3>Vegetarian Delights</h3>
        <p>For those with a penchant for plant-based cuisine, Bali's vegetarian restaurants serve up a variety of flavorful and innovative dishes, celebrating the island's abundant fresh produce.</p>
    </div>

    <p>Whether you're seeking traditional Balinese fare, international cuisine, or health-conscious options, Bali's culinary scene is a feast for the senses. Explore, indulge, and savor the diverse tastes that make Bali a true food lover's paradise.</p>
      </section>

      <section class="main-section" id="code">
        <header>Code</header>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
      </section>

    </main>
  </body>
  </html>

html{
  scroll-behavior: smooth;
}
body {
            font-family: 'Arial', sans-serif;
            padding: 0;
            margin:0;
            display: flex;
            height:100%;
            background-color:#fff;
            min-width:600px;
            overflow-x: hidden;
            
}




#about_bali header{
  text-align:center;
}

#about_bali{
  margin-bottom:70px;
}

nav{
  color:#ffffff;
  padding:20px;
  height:100%;
  width:100px;
  display:flex;
  position:fixed;
  flex-direction:column;
  background-color:#03045e;
  font-size:1.5rem;
  overflow:hidden;

}

nav a {
            color: #ffff;
            text-decoration: none;
            margin: 20px 0;
            border-bottom:1px solid black;
            
            }

.main-section{
  font-size:1.5rem;
  padding:20px;
  width:50%;
  margin:auto;
  min-width:70%;
  margin-bottom:50px;
}

 

section header{
  font-size:2rem;
  font-weight:700;
  text-align:center;
  margin-bottom:20px;
}     

@media (max-width: 1000px) {
  nav{
    position:fixed;
    width:100%;
    height:40px;
    display:flex;
    flex-direction:row;
    align-items:center;
  }

}

@media (max-width: 1000px) {
  a{
    padding-left:20px;
    padding-top:0px;
  }
}

@media (max-width: 1000px) {
  .main-section{
    margin-top:100px;
  }
}

section{
  margin-bottom:100px;
}

Try using align-items: center on the nav

I assume that is what you mean by inline.

1 Like

Simple, yet genius!!!

Thank you.

if you can/have the time, some general feedback about my code would be greatly appreciated.

Personally, CSS sizing values confuse me. i find myself just entering random figures and choosing what looks best.

Thanks again!
Antonio :facepunch:t3:

1 Like

My only advice would be to keep coding and learning. It takes time and you will develop your own ideas on what works and doesn’t.

Judging values by eye is usually a good idea. Otherwise, you end up with rigid systems that have fixed sizes, media queries with breaks at fixed values, and so on. If you have the luxury of doing it by eye on a case-by-case basis, it can allow for more natural-looking sites.

On the other hand, it can result in inconsistencies. If it is a multi-page site make sure you repeat the same styles as needed for a consistent look (e.g. element spacing needs to be consistent). Using utility classes can help with consistency, e.g. a padding-top class .pt-2 { padding-top: 2rem } that you reuse as needed.

It isn’t really possible with large sites, they need a style guide developers can refer to so the site maintains consistency. If 20 people do it all by eye as they like it, it ends up in a mess.