Navbar won´t center properly and website gets destroyed while zooming

[ullah229]

Hello,

I´m a HTML/CSS newbie and I want to create a new website for myself, but the navbar is frustrating me, as it doesn´t want to center and when I zoom in/out, my entire website gets destroyed. I googled for many days and I tried many solutions, but it doesn´t work for me.
Therefore, I need your help to solve my issues.
If anyone can help that would be appreciated.

https://codepen.io/ullah229/pen/QPMBNp

This is my source code I´ve written so far.

[uxfed]

Hi, since you’re new to HTML/CSS I’d suggest you look in to CSS media queries. You’ll need to do different things based on screen width and media queries are the way to do it. You may want to use more padding for your links at wider screen widths and vice-versa at smaller widths.

On mobile you may want to toggle the menu with a button and have the menu items stack. There are loads of JavaScript examples online to show you how to do the toggling, but again, that stacking of the links will be media queries again.

I personally usually use Bootstrap navigation so that may be something to compare your implementation to.

[Author]

Posts