It seems the trend is to put the company logo or brand in the navbar with Bootstrap 3, but I need to have it below the navbar and centered on the page but have it responsive as well.
The project is to convert an existing WordPress website into a completely static website using Bootstrap 3 framework. Things are going to be a little different with the static site. One of the things that I noticed works better is to have the navbar to the right so when resizing the browser, the nav links don’t see to break. That is cool and I will explain that to the client (who doesn’t really care about the site being responsive yet views it all the time on his iPad!).
What I did was create a page header which has the nav and the logo in it. For the logo I created another container. The image link is in the HTML, not the CSS. I don’t know if that is best practice or not. That is the way it is on the WP site.
Here is the WP site - http://sacramentgame.com
Here is the static Bootstrap site - http://sacramentgame.com/sacramentgame/
What is the best way to get the logo centered and just under the top nav? I thought maybe the Jumbotron was a way to do it with transparent background and the logo centered that way. I have not used Bootstrap before, so this is all new to me using this framework.
The logo has 2 sizes - 500x100 and 300x60.
http://sacramentgame.com/sacramentgame/images/logo.png
http://www.sacramentgame.com/sacramentgame/images/logo-300x60.png
Yes the 300x60 does fit in the navbar but the client wants it where the logo is on the WP site.