Just remember that the best tool sometimes is to start over. All it can take is one rouge CSS line to mess up your entire navigation bar without you knowing what is wrong. Hours are wasted stressed and rethinking your programming abilities.
Sometimes I just restart and rethink how to break it down for a different approach. Those links you used in your navigation bar are just boxes. So just take them and put them into a row. Sure they may act differently since they are a different type of HTML element (different default CSS then a normal div), but you learn to work with it. It may require more styling as a result.
I am not encouraging just constantly quitting without trying, but sometimes you know that you are in too deep and messed something up along the way. I don’t restart the entire project, but just small parts if I know I messed that specific area too much for the time it would be worth to debug.
Look at every single navigation bar on this website. All they are is just words next to each other. Yet they fit in so well. Simplicity is key. Users don’t want to be subconsciously sensory overloaded and therefor strain their eyes trying to navigate the UI. That is why so many websites look the same in today’s time. Web developers, over time, discovered that simple and modern themes without any background images are best.
When I mean eye strain, it can be anything that is hard to read and look at.
I actually wrote a mini-article about this on FCC for some big tips on how to improve your webpage. Check it out here; keep in mind most of the links to example webpages don’t work anymore.
Here are some quick examples.
- Image backgrounds. You should never have a large amount of text over top of a image. Here is a example of my portfolio page, where I specifcally used a dark image background that did not vary in color that much. On top of that, I used big bold white text over top of it. This is a very simple design that you will often see on many webpages but ignore it.
- Bright colors. No matter what you do, they will never look good.
- Colors that are not friendly to color blind users
- Bad color schemes like green and purple. Look at my useful sites below for a color scheme generator website called Coolors. Below that link you will find another link for some of the most highly rated color schemes for you to use.
Here Is a site of useful programming tools: https://codepen.io/Mike-was-here123/post/check-out-these-sites
On a side note, I see you are learning. Be happy and don’t give up. I was in your position too at some point. Everyone was.