Need help making background image and nav bar looking good on smaller screen size

Hello! I’ve been trying so many different ways to make the background image and navigation bar responsive but I can’t get it to work.
Link to what I need help on:


The nav-link class doesn’t move the way I want it to. I tried making each of them display: block (doesn’t this make it take up the whole line?) and also tried flex-direction: column but they just keep being next to each other. I want the navigation bar on the page to look like this while its in mobile: https://codepen.io/ConnieQ/full/zemErP

I also can’t get the first background image and the words in it (Match-A-Matcha and Organic Matcha) to center correclty either.

1 Like

For centering stuff like text over images, set margin-left to auto, along with margin-right.
Make sure navbar has width set to 100% on the default display and all variations from @media queries!

2 Likes