Navigation Changes

The navigation for my site was tricky. Back when I first made it I couldn't get it to work sitting under the logo so I locked it to the bottom of the page. I knew this wasn't the right move but it was a quick fix. So I used this as an opportunity to revisit this aspect and get it how I wanted it. This is how it looked:

So I moved it to the top of the page underneath the logo. This is the conventional place for the navigation to be located which as a result makes my site as a whole far more navigable. I also re-styled it pretty substantially. I wanted a cleaner more elegant look to the navigation. This is the end result:

I also think that this looks a lot nicer too. It is clean and gives the logo itself a little more character. Once other thing I wanted to do was fix a glitch that had been bugging me for a while. That is that when you go to the mobile size and open the navigation then move the page back out the mobile navigation stays underneath the main nav. Like this:

The menu at mobile level:

When the page has been scrolled back out to desktop size:

So I went into the code and added this:

And with that the problem was solved. This little bit of code ensures that the mobile navigation cannot be visible at any size above the size that it becomes viewable. It was a quick, simple fix that works really well. So with that and a bit of styling the mobile navigation went from this:

To this:

Again this styling makes it fit in a lot better and I think that it is a lot clearer to use now. I think overall I have really improved the navigation capabilities of my site just through these changes.