Working with Bootstrap 3 for the first time and need some help with the logo

HTML & CSS
1

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.

2

You can set text-align:center; on the #logo element to center the inline image. The background image will need to be updated to “top center” as a background-position to match now.

3

Thanks Ryan. That worked. I did change the HTML to not have the logo image there but put it in the CSS instead so that when the browser is resized, the smaller image can be shown. I don’t know if that is best practice or not because I had to set and width and height in order to have it show.

What would be your suggestion for best practice in order to have the 2 logo image sizes utilized?

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.