Collapsing a navbar horizontally and centred

#1

Hello! I’m just starting out on the portfolio project, and have decided to make life more difficult for myself by attempting to ‘reverse engineer’ the example which is given.

I’ve managed to make a collapsible navbar, but can’t work out how to:

  1. Make it collapse horizontally (rather than vertically)
  2. Have the menu items collapse centred like in the example

My pen is here: https://codepen.io/tara_matt93/pen/owwvjJ

and for reference here is the page I am trying to copy: https://codepen.io/freeCodeCamp/pen/YqLyXB

Thank you!

#2

Look at this sample code taken from w3schools.com

To achieve the effect in the sample, this media query is doing the work. The width:120% seems to do the necessary, pushing the navigation to beneath the header on a small screen view.

mediaQry.png735×290 38.6 KB

#3