Collapsing a navbar horizontally and centred

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:

and for reference here is the page I am trying to copy:

Thank you!

Look at this sample code taken from

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.