I wasn’t surprised that one of my peskiest problems while building my website was the navigation bar. I felt confident at first, but of course my ideal navigation is a bit more advanced than what we have learned in class. I wanted to have the Missourian logo on the left and align the other links on the right side of the page. After the initial styling, this was the mess I made:
After lots of trial and error, I decided to split the navigation bar into two parts: a basic image of the Missourian logo and a div with the list items. As you can see, I ran into some problems with overlapping text because the list items were too wide and there was not enough padding between the logo and the list. Additionally the navigation bar didn’t look like one cohesive element because the components were different heights.
After I added some padding to the right side of the logo, I was in better shape except that my floated elements were all over the place and my list items were still too wide.
I managed to get that all worked out, but I still didn’t have the alignment I wanted. I decided to add a second div to my navigation bar to serve as a bumper of sorts. I placed it in between the logo and the list items. It doesn’t have any content except basic dimensions and a background color. This definitely feels like a hack, and there’s probably a better way to do it that would be more reliable, but so far it’s been working. If you know a better way though, I’m all ears.