Documentation Page (need a better responsive navbar)

Code Feedback
1

So, im done with this documentation page project but i had a hard time on how to make the navbar fit in a mobile screen (too many items), i dont know any JS yet and seems most solutions require JS . Any ideas other than make a long index like nabvar in a small size screen?

Thanks in advance

2

You could move the property links from the main menu to sub menus at the beginning of these sections.

3

Hi @al3busse, I took a look at your page. Good job. I’d suggest that you run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.

  • Ignore the first three error since you’re copy/pasting from codepen but clean up the other errors.
  • as to the warnings it’s say that instead of;
<section class="main-section" id="What_is_Flexbox?">
<header>What is Flexbox?</header>

consider doing;

<section class="main-section" id="What_is_Flexbox?">
<header><h2>What is Flexbox?</h2></header>
4

i did use the w3c validator, i actually ignore those because there is a rule: User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.

5

I understand meeting the user stories. The sample I showed still meets and passes the user story and further suppresses the warning.
It’s not necessary to do it.

1 Like
6

Hi, it’s actually very easy !
In your media query for smartphone give a height like :

height: 200px;

and then you only need the prorperty “overflow”
which would give you

height: 200px;
overflow: scroll;

so you will be able to scroll in your navbar !

1 Like