On regular sized devices (laptops, desktops)

#1

On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.

<nav class="nav-link" id="navbar">
	<header class="subject">My Technical <br>
	Documentation</header>
	<a href="#introduction" class="nav-link">introduction</a>
	<a href="#javascript" class="nav-link">javascript</a>
	<a href="#variable" class="nav-link">variable</a>
	<a href="#scope" class="nav-link">scope</a>
	<a href="#function" class="nav-link">function</a>
</nav>


<section class="main-section" id="introduction"> <header id="introduction">introduction</header> <p>
		Hellom world this is All about My Knowledge on how to use HTML, CSS and Javasrcipt language in my system
    <ul>
    <li>I am learning</li>
    <li>I am learning</li>
  </ul>
	</p>	<p>
		<code >
			My Code Goes hereMy Code Goes hereMy  <p>Code Goes hereMy Code </p>Goes hereMy Code Goes hereMy Code <p>Goes hereMy Code Goes hereMy Code </p>
		</code>
	</p></section>

#navbar {
  position: fixed;
  background-color: #cccc;
}

#navbar:hover {
  position: fixed;
  background-color: black;
}

#navbar a{
	display: block;
	border:  0px solid black;
	padding: 5px;
	margin:  10px 0;
	text-decoration: none;
	color: black;
	background-color: silver;
	width: 200px;
}

@media only screen and (max-width: 600px) {
  a {background: red;}
}


#main-doc{
	grid-area: mainContent;

}

it keeps giving me an error message

#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

#3

Here’s a pen with the same code provided here (I also fixed HTML errors, and code tag): https://codepen.io/phpdude/pen/eaamOy

I don’t know why that test isn’t passing for you, it is for me. Make sure you’re using Chrome as the browser, the test suites only work good there.

#4