Documentation page HELP!

HTML-CSS
1

Hi! So I am in need of review and help.


So problem one: my nav bar is not responsive

@media (max-width: 1080px){
  #navbar{
    position:fixed;
    width:100%;
    height:100px;
  }
  #navbar li{
    display: block;
    float:left
  }
}

Seems to not do the trick. I am trying to switch to a horizontal nav bar after the qeury triggers. I am also a filthy bootstrapper at heart so I am very new to using querys. Any help on that end of things would be awsome.

NUMBER 2:
all my code sections are using pre tags which clip trough stuff when the screen is to small. Is there a fix other than nesting the code in li elements to give them that tabbed out look?

<pre><code>random cat phrases and stuff my dude<code></pre>

Any way all feedback welcome!

2

You need to completely redefine #navbar so that it work differently. Try putting displacy:block on it and defining placement on the li with display:inline

3

Hi! That worked!! thanks for your help!

4

Did you really manually add all those HTML entities by hand? If so you are a better man (person) then me, boy that would drive me up the wall.

  1. For the text wrap, add this to the pre selector.
overflow-wrap: break-word;
white-space: pre-wrap;
  1. The anchor element is not a valid child element of an unordered list, switch the <a> and <li> around.
<!-- invalid -->
<ul>
  <a class="nav-link" href="#Getting_started"><li>Getting started</li></a>
</ul>  
<!-- valid -->
<ul>
  <li><a class="nav-link" href="#Getting_started">Getting started</a></li>
</ul>

  1. Check that your opening and closing tags match up and that all are closed correctly.

  2. You can try this for the menu, see if you can glean something from it, delete it and then try to do it again yourself.

Summary 
/* I have just removed the height from #navbar and the ul, rest is the same */
#navbar{
  position:fixed;
  top:0px;
  left:0px;
  width:150px;
}

#navbar ul{
  overflow-y:auto;
  overflow-x:hidden;
}
/* Added flexbox to ul removed display fixed from #navbar as it is already set */
@media (max-width: 1080px) {
  #navbar {
    width: 100%;
    height: 100px;
    display: block;
    background-color: #9BD4F5;
  }
  #navbar ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  }
}
1 Like
5

Hi! thanks for your help! I used a escape tool for all the code snipets so no I did not do it by hand.
The anchor tags are done that way because the example website did them that way. I did not know
that was wrong. As for the closing tags i noticed a few <code><code>that should have been
<code></code> so thanks for the heads up! As for the navbar thanks for the suggestion! I did
re-build the nav bar I think 3 times in total and your idea helped me learn alot!

p.s sorry I didn’t respond sooner I was VERY busy over the weekend.

6

Your right, that should really be fixed. I don’t know why they would use invalid HTML for the example site.