Add home button to header

[KirstieJane]

Our new website layout (eg: http://stemmrolemodels.com/site/about.html) doesn't have a button to take you back to the home page.

It would be great if the header could have a STEMM Role Models logo (in the SchematicDesign folder) in the top left corner that linked back to the home page (currently site/new_homepage.html)

[jayqi]

Need versions of the logo that have a transparent background. Currently all of the images have white backgrounds, which results in something like this:

Note that .jpg does not support transparent backgrounds. I recommend making .png versions.

[jayqi]

The way you'd eventually do this with the Bootstrap navbar is to add something like:

<a class="pull-left" href="#"><img src="../SchematicDesign/logo_full_color.jpg" height="40px"></a>

into the navbar-header div, e.g.

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="pull-left" href="#"><img src="../SchematicDesign/logo_full_color.jpg" height="40px"></a>
</div>

Change the href attribute to where you want the link to point and the src attribute to the path of the image.

[KirstieJane]

Thanks @jayqi! That makes sense. If you wanted to make the .png images and submit them to the repo that would be super helpful! Don't worry if you're working on something else though 😄

[erich001]

hi @jayqi, I just made a version w transparent background. The pull request is submitted.

[KirstieJane]

And merged! Thank you @erich001 😃

Transparent background file is in the images directory here.

[KirstieJane]

Hi @jayqi - I know this is super late but THANK YOU for such a helpful comment. I just implemented it with great ease! We really appreciated your help at the global sprint! 😄

[KirstieJane]

Hey @neuroAmyo - I've implemented a logo on the FAQ page but I'm not super sure I like it - I think having the explicit link to Home looks cleaner.

Take a look and let me know - what you think - it's super easy to add in to the other pages if you like it!

[neuroAmyo]

@KirstieJane et al., this is all looking awesome! So cool to see this coming together 👍

I agree that the logo there isn't looking great. Is there a reason we're using the full logo and not the banner version here? I was imagining the banner version would be for exactly this type of situation.

[KirstieJane]

Thanks @neuroAmyo.
I can totally put the banner version on there. I didn't think there was a version that has a transparent background? Can you point me to the file?

[KirstieJane]

Done! Looks great!

Thanks @neuroAmyo 😄