News Homepage Main using Bootstrap3

This is my improved implementation of this challenge using Bootstrap. Here is the advice I got last time:

• use landmark elements - header and main on this challenge, and footer if you include attribution. All content should be in landmarks.
• only one nav, not two. Don’t repeat html for different screen sizes, just change existing markups layout with css
• you cannot have event listeners on non interactive elements. For a mobile nav toggle, there must be an accessibly named button with aria-expanded attribute on it directly before the list you are toggling. Often there will only be one button used for both open and close but you could have two buttons if you prefer
• don’t have an empty div. Create an overlay with a pseudo element and disable scroll when the nav is open on mobile
• this challenge needs a visually hidden h1
• the featured article should be in an article element and have a h2
• new section should ideally be in a section or aside with aria-labelledby pointing to the id of the New heading
• inside each of the h3s you need to have anchor links. Think about how people would actually access these articles - they need to be able to click on them and navigate to the articles
• ideally the new section should have each of the articles in an unordered list the section at the bottom should have a visually hidden h2 eg other articles or recommended articles or popular articles, something like that
• I recommend that is also a section with aria-labelledby that heading ID
• the design shows each of the articles at the bottom are numbered. This gives a clear indication this section should include an ordered list to list these articles as with the other articles, these also need anchor links so there is a way to click through to the articles
• the numbers like 01 02 03 cannot be heading elements. That would make no sense semantically on a contents list for this page. Instead make them paragraphs. They could even be aria-hidden once you’ve added in the ordered list as each list item would be numbered already
• do not change inline styles with javascript. That’s not what it’s for. Use JavaScript to toggle attributes like aria-expanded and classes or other attributes of you like. Let css handle ALL styling

I have bolded the things I did not do/could not figure out.

One of the things I could not figure out is how to implement the overlay without an empty div. I would appreciate if you could help me with that.

Let me know your thoughts :)