Header

[haydy778]

This is my navigation bar at the top of my website with the bar to the left and logo to the right. While creating my header I did development in my index.html page but after I had coded it and decided the look i wanted i moved the code into a JS file and by using a custom element called header-component the JS will input the code into the page. By doing this I can just add the header-component element to any other webpage I want and the header will always be the same. If i were to change the html in the JS file it would change on all the pages. This is a future proofing consideration I took while making the website and making it easier for me instead of changing every web page html if I wish to adjust something.

[haydy778]

I am struggling to align my header items.

[haydy778]

I added a display flex to the container and then aligned content center, and it fixed my issue

[haydy778]

I have finished my header/navigation bar

[haydy778]

I felt that the navbar wasnt visible enough for users and didnt meet a nice aesthetic. So i decided to add a white background to it to show it better and have black text for the strongest contrast between the background and and the links. An issue i ran into with this was the logo placement. I overcame this by testing different designs in photoshop to see how it would look. Then i decided to have a white triangle under the navigation bar so the logo could still be large and look like it fits in the header. I have attached the iteration process in the form of images. I also decided to branch this change so i could return to the old header if needed and in case I didnt like the new header that I created.

The Original

Before changing the logo

Final Look

[haydy778]

I have now since decided that it would make the website more functional with a fixed header so have adjusted the container position to fixed so the user can always navigate the site without having to be at the top of the page.