Having trouble with position and display

Hi there so I’m attempting to use a sticky-flexbox to accomplish the goal of keeping the nav bar always in view.

Having trouble with two things:

  1. The a elements aren’t nicely lining up in a downward direction.
  2. When scrolling down I can’t seem to make the nav actually stay on screen.

Thanks in advance for any help.

Here is my html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Stellaris</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav id="navbar">
      <header>Stellaris: Overview</header>
      <a class="nav-link" href="#Introduction">Introduction</a>
      <a class="nav-link" href="#Game_Overview">Game Overview</a>
      <a class="nav-link" href="#Strategies_and_Tips">Strategies and Tips</a>
      <a class="nav-link" href="#Downloadable_Content_(DLC)">Downloadable Content (DLC)</a>
      <a class="nav-link" href="#Conclusion">Conclusion</a>
        </nav>
    <main id="main-doc">
    <section class="main-section" id ="Introduction">
      <header>Introduction</header>
      <p>This technical documentation provides an overview of Stellaris, a grand strategy game developed by Paradox Interactive. In Stellaris, players take on the role of a space-faring civilization and navigate a vast galaxy, making strategic decisions to expand their empire, interact with other civilizations, and uncover the mysteries of the universe.</p>
      </section> 

    <section class="main-section" id="Game_Overview"><header>Game Overview</header>
    <p>Stellaris offers a rich and immersive gameplay experience that combines exploration, diplomacy, warfare, and empire management. Here are the key elements of the game:</p>
    <h4>Starting a Game</h4>
    <p>At the beginning of a new game, players customize their civilization by choosing traits, ethics, government types, and technology preferences. These choices influence gameplay and determine the strengths and weaknesses of the empire.</p>


    <h4>Galaxy Exploration</h4>
    <p>Players begin with a single star system and gradually explore the galaxy, discovering new planets, star systems, anomalies, and resources. Exploration is crucial for expanding your empire, acquiring resources, and encountering various events that can shape the course of your civilization.</p>
    <h4>Empire Management</h4>
    <p>As the leader of your civilization, you'll be responsible for managing various aspects of your empire. This includes resource management, population growth, technology research, infrastructure development, and policy decisions. Balancing these elements is key to ensuring the prosperity and growth of your civilization.</p>
    <h4>Diplomacy and Interaction</h4>
    <p>Stellaris features a comprehensive diplomacy system that allows players to engage with other civilizations through negotiation, trade, alliances, or conflicts. Interacting with other empires can lead to opportunities for cooperation, technological exchange, or territorial expansion.</p>
    <h4>Warfare and Conflict</h4>
    <p>When diplomacy fails, military force may be necessary. Players can engage in space battles, ground invasions, and wars to assert dominance over other civilizations. Strategic fleet composition, ship design, and tactical decisions play a vital role in the outcome of conflicts.</p>
    <h4>Technology Research</h4>
    <p>Advancing your civilization technologically is crucial for gaining an edge over rivals. Researching new technologies unlocks upgrades for your empire, including improved weapons, advanced ship components, and enhanced resource extraction methods.</p>
    <h4>Events and Storylines</h4>
    <p>Throughout the game, various events, crises, and storylines unfold, adding depth and narrative to the gameplay. These events can range from scientific discoveries and archaeological excavations to encounters with ancient civilizations or hostile entities. Your choices during these events can have long-lasting consequences for your empire.</p>
    </section> 

    <section class="main-section" id="Strategies_and_Tips"><header>Strategies and Tips</header>
    <ul>
      <li>Expand Strategically: Plan your expansion carefully, considering factors such as resource availability, habitability of planets, and proximity to potential allies or rivals. Expand at a pace that allows for effective administration and defense of your territory.</li>
      <li>Manage Resources Wisely: Resources such as energy credits, minerals, and influence are vital for your empire's growth and development. Ensure a balanced economy, prioritize infrastructure construction, and manage resource allocation efficiently.</li>
      <li>Embrace Diplomacy: Diplomatic relationships can be crucial for your empire's survival and growth. Seek alliances, trade agreements, and research agreements with other civilizations to foster cooperation and mutual benefits.</li>
      <li>Invest in Technology: Stay ahead of the technological curve by allocating resources to research and development. Unlocking advanced technologies can provide significant advantages in warfare, resource extraction, and empire management.</li>
      <li>Customize Ship Designs: Experiment with ship components and designs to create fleets tailored to specific combat scenarios. Balance offensive and defensive capabilities based on your empire's strategy and the threats you anticipate.</li>
      <li>Monitor Ethics and Populations: Keep a close eye on the ethics of your population. Your empire's ethics can influence the happiness, productivity, and stability of your citizens. Implement policies and decisions that align with the values and goals of your civilization.</li>
      <li>Adapt to Events and Crises: Be prepared for unexpected events and crises that can shake the stability of your empire. Adapt your strategies and decision-making to overcome challenges, mitigate risks, and seize opportunities presented by these events.</li>
</ul>
</section> 
    <section class="main-section" id="Downloadable_Content_(DLC)"><header>Downloadable Content (DLC)</header>
    <p>Stellaris offers a range of downloadable content that expands the game's features, introduces new mechanics, and provides additional content for players to explore. Here are some notable DLC packs for Stellaris:
    <ol type="1">
      <li>Utopia <br>
      <p>Utopia is a major expansion that introduces new gameplay elements focused on empire customization and ascension perks. It allows players to construct megastructures, shape their species' evolution through genetic modification, and pursue paths of synthetic or psionic ascension. Utopia adds depth and variety to empire development, offering new strategic options and possibilities.</p>
      <code> Utopia is a must have. Ascensions is an incredibly flavorful mechanic allowing you to tailor your empire in unique ways. That along with all the other smaller things such as Megastructures, hab stations, and other advanced things make this a 10/10 in my book. </code>
        </li> 
      <br><li>Apocalypse<br>
      <p>Apocalypse is a DLC pack that centers around warfare and destruction on a grand scale. It introduces powerful, planet-destroying weapons called Colossi, new ship types such as Titans, and marauding space nomads known as the Marauders. This expansion emphasizes the importance of military might, offering new tools and strategies for conquest and domination.</p></li>
      <li>Synthetic Dawn<br>
      <p>Synthetic Dawn focuses on the rise of artificial intelligence and machine empires. This DLC allows players to create and play as robotic civilizations, each with their own unique characteristics, goals, and playstyles. It adds new storylines, events, and mechanics related to synthetic life, offering an entirely different approach to gameplay and empire management.</p></li>
      <li>Federations<br>
      <p>Federations introduces a range of new diplomatic and political features, expanding the possibilities for interstellar diplomacy and alliance-building. This DLC allows players to form powerful federations, customize federation laws, establish a galactic senate, and engage in diplomatic negotiations with other empires. It enhances the depth of diplomacy and cooperation, offering new ways to shape the galaxy's political landscape.</p></li>
      <li>Ancient Relics<br>
      <p>Ancient Relics adds a sense of archaeology and discovery to Stellaris. This DLC introduces ancient artifacts, relics, and archaeological sites that can be investigated to uncover valuable technologies, insights into the galaxy's history, and even ancient guardians. It adds a new layer of exploration and narrative depth, allowing players to unravel the mysteries of the past.</p></li>
      <li>Nemesis<br>
      <p>Nemesis is a recent expansion that focuses on the concept of impending crises and the ability to become a galaxy-ending menace. This DLC introduces new espionage mechanics, the ability to become a powerful Galactic Custodian or the dreaded Nemesis, and the option to resolve conflicts through the manipulation of the galactic balance of power. It adds exciting new gameplay possibilities and narrative arcs.</p></li>
</ol>
</section> 
    <section class="main-section" id="Conclusion"><header>Conclusion</header>
    <p>By following this technical documentation, you should now have a solid understanding of the mechanics and strategies involved in playing Stellaris. Explore the vast reaches of space, build a powerful empire, engage in diplomacy or warfare, and shape the destiny of your civilization. May your empire thrive among the stars!</p>
    </section> 
    </main>
  </body>
</html>
html, body{ 
  display:flex;

}
#navbar {
  position:sticky;
  top:auto;
  left:0px;
  width:350px;
  flex-direction:column;
  border-right: solid;
  flex-wrap:wrap;
  
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

1 Like

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

  1. top should be 0 not auto

  2. You have to align the items to the start.

Here is an article explaining it. It applies to Flexbox as well.

  1. You have to make #navbar a flexbox container using display: flex for the flex properties to work.
2 Likes

Ah got it. For some reason I thought that #navbar would inherit the flex property from html body.

1 Like

No display is not an inherited property. I think you would very quickly find it annoying if it was.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.