Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
The users story is asking me to :
“On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the use”

I have tried putting
navbar {
position: fixed;
}
in css but it doesnt work.

could someone help me out?

Your code so far

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <div class="row">
      <div class="leftcolumn">
        <div class="card">
          <nav class="topnav" id="navbar">
            <header>How to start a Motorcycle</header>

            <a href="#Sit_on_Motorcycle" class="nav-link">
              Sit on Motorcycle
            </a>
            <a href="#Lift_Kickstand" class="nav-link">
              Lift Kickstand
            </a>
            <a href="#Turn_on_Ignition" class="nav-link">
              Turn on Ignition
            </a>
            <a href="#Press_Ignition_Button" class="nav-link">
              Press Ignition Button
            </a>
            <a href="#Drive_Motorcycle" class="nav-link">
              Drive Motorcycle
            </a>
          </nav>
        </div>
      </div>
      <div class="rightcolumn">

        <div class="header">
          <h1>How to Start a Motorcycle</h1>
        </div>
        <main id="main-doc">

          <div class="card">
            <section class="main-section" id="Sit_on_Motorcycle">
              <header>Sit on Motorcycle</header>
              <code>First do a Saftey Check</code>
              <ol>
                <li>Is your Helmet,Jacket, Gloves on?</li>
                <li>Are you wearing long pants?</li>
                <li>Do you have closed toed shoes on?</li>
                <li>How are the weather conditions?</li>
                <li>Is the bike in good order?</li>
              </ol>
              <p>When you first sit on a motorcycle it's a good idea to take a moment and think about your surroundings.</p>
              <p>Go over the functions of the controls before starting it up.
Get a feel for how you fit on the motorcycle. Grip the handlebars, clutch lever and brake lever. Make sure you can reach these controls comfortably. Your arms should have a slight bend in the elbow when gripping the handlebars. Switches should be within easy reach of your fingers.
Make sure you can easily plant your feet on the ground. Get a feel for the weight of the bike underneath you. Additionally, you should be able to operate the rear shifter without lifting or sliding foot off the peg.</p>
            </section>
          </div>
          <div class="card">
            <section class="main-section" id="Lift_Kickstand">
              <header>Lift Kickstand</header>
              <code>The kickstand is a metal piece that holds the motorcycle up when you're not there.</code>
              <p>Most modern motorcycles depend on you to lift the kickstand before you can start the motorcycle.</p>
              <p>kickstands flip out from the side of the bike, some motorcycles have center kickstands and some bikes are even equipped with both types.</p>
            </section>
          </div>
          <div class="card">
            <section class="main-section"  id="Turn_on_Ignition">
              <header>Turn on Ignition</header>
              <code>Use your motorcycle key to turn on ignition.</code>
              <p>First confirm the fuel level,then you can insert the key in the ignition and turn it on. If the battery is charged and in great working condition, the bike should turn on. If the battery is dead, then the bike's lights won't turn on.</p>
              <p>Confirm if the neutral indicator on the dashboard is illuminated when the bike is turned on. If not, you can put it in neutral gear, which is situated between the first and second gear in most bikes. After all, you don't want your bike to take off without you when switched on. All experienced riders put their bikes on neutral after every trip and when parking them. If you left it on neutral, you wouldn't have to worry about this step.</p>
            </section>
          </div>
          <div class="card">
            <section class="main-section"  id="Press_Ignition_Button">
              <header>Press Ignition Button</header>
              <code>Some motorcycles don't have an igntion button.</code>
              <p>If you don't have an ignition button, use the kick-start device.</p>
              <p>Kick start is a method of starting an internal combustion engine (usually that of a motorcycle) by pushing a ratcheting lever with one's foot.</p>
            </section>
          </div>
          <div class="card">
            <section class="main-section" id="Drive_Motorcycle">
              <header>Drive Motorcycle</header>
              <code>The BEST PART!</code>
              <p>Enjoy a safe motorcycle ride..</p>
              <p>Once the engine has started and warmed up, you can begin to ride. This is done by shifting down into 1st gear and letting the clutch lever out while simultaneously pulling back on the throttle.</p>

<p>Make sure your kickstand isn’t out.
Slowly let out the clutch lever until the bike starts to roll forward.</p>
You may have to pull back on the throttle slightly to prevent your bike from stalling while releasing the clutch.
Once you are moving, accelerate slightly and pull you feet up onto the pegs.
<p>Try straight line riding. As you let the clutch out and slowly roll the throttle back to pick up a little speed, continue riding in a straight line. When you are ready to stop, pull in the clutch lever, and slowly apply the front and rear brakes simultaneously. Use your left foot to steady the bike at a stop. When you are stopped, put your right foot on the ground.</p>
            </section>
          </div>
        </main>
      </div>
    </div>

   
  </body>
</html>


<style>    
      * {
        box-sizing: border-box;
      }

      body {
        font-family: Arial;
        padding: 10px;
        background: #f1f1f1;
      }

      /* Header/Blog Title */
      .header {
        padding: 30px;
        text-align: center;
        background: white;
      }

      .header h1 {
        font-size: 50px;
      }
      

      /* Style the top navigation bar */
      .topnav {
        overflow: hidden;
        background-color: #333;
      }

      /* Style the topnav links */
      .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        
      }

      /* Change color on hover */
      .topnav a:hover {
        background-color: #ddd;
        color: black;
        position: fixed;
      }

      #navbar{
        position: fixed;
      }
      
      /* Create two unequal columns that floats next to each other */
      /* Left column */
      .leftcolumn {
        float: left;
        width: 25%;
      }

      /* Right column */
      .rightcolumn {
        float: left;
        width: 75%;
        background-color: #f1f1f1;
        padding-left: 20px;
      }

      /* Fake image */
      .fakeimg {
        background-color: #aaa;
        width: 100%;
        padding: 20px;
      }

      /* Add a card effect for articles */
      .card {
        background-color: white;
        padding: 20px;
        margin-top: 20px;
      }

      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
     

      /* Footer */
      .footer {
        padding: 20px;
        text-align: center;
        background: #ddd;
        margin-top: 20px;
      }

      /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 800px) {
        .leftcolumn, .rightcolumn {
          width: 100%;
          padding: 0;
        }
      }

      /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
      @media screen and (max-width: 400px) {
        .topnav a {
          float: none;
          width: 100%;
        }
      }
  </style>

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Well, it’s hard to find a solution without your full CSS code. As an example:
#navbar { -----------------------you must have # in front of your selector
height: ---------------------full
width: ---------------------as you wish
position: fixed;
top: ---------------------from the top
left: ---------------------from the left
z-index: 1; ---------------your navbar has to be on a layer above the page, when you scroll your page navbar stays visible on the left.
background-color: -----------------as you wish
overflow-x: (W3Schools Tryit Editor)
padding-top: ----------------------------as you wish
border-right: ---------------------------as you wish
}
It is not your final solution! Just an example with more possible properties.

1 Like

Firstly this is my full css.
Secondly, thank you for the guidance. This really helped. I also took the liberty of looking at the side navigation on w3schools. I placed my width: 27%, top: 0, left: 0, overflow: hidden, padding-top: 60px; border-right: 10px;

I had to play around with the values but it all worked out alright. Thank you again.

1 Like