Thursday, 2 February 2017

Custom bootstrap Nav


I started learning to code after setting up my own website and  2 others for clients using the inbuilt templates in the hosting company packages.

I was rather dissatisfied with the results as the templates were inflexible and I knew what I wanted but was unable to achieve it.

As it turns out, the selection of the hosting company is also key as their templates sometimes are not so good for SEO, but that is for another day.

I learned the basics of HTML and CSS very quickly, also Bootstrap, which I have used quite a bit. I understand it but, like all these technologies, has the ability to trip me up spectacularly, usually because I did not properly RTFM and the subject is so vast.

Most recently, I was putting together some ideas for a site for a local sports club.  Their colours are a shade of burgundy (#590316) and an off white for which I selected lemonchiffon (#FFFACD).

I had it set up with a Bootstrap standard nav and played about with inverse and all the usual fidgets and tweaks and then I decided that I would like to change the colours of the standard nav to the same colours as the site rather than the plain standard options.

I found a site that would assist me in my endeavour – I supplied it with the colour codes and it generated the relevant custom html and css to enable me to change the colours without too much fuss.

All done, with my custom css in a separate custom.css file.  Feeling quite proud of the fact that I had done it all with the relevant entry in the header section pointing to the custom.css file. I ran the code in a browser. No difference.

Now why was this?

This was because I had left the bootstrap class  navbar-inverse in place rather than changing it back to navbar-default.  I spent a lot longer trying to figure out what was wrong than it has taken me to type it up for this blog post!

No comments:

Post a Comment