Add home button to header

Question

Add home button to header

KirstieJane opened this issue 8 years ago · 10 comments

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)

Answer 1 · 2016-06-03T18:48:25.000Z

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.

Answer 2 · 2016-06-03T18:53:41.000Z

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.

Answer 3 · 2016-06-03T19:16:37.000Z

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 😄

Answer 4 · 2016-06-03T21:21:31.000Z

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

Answer 5 · 2016-06-03T21:28:42.000Z

And merged! Thank you @erich001 😃

Transparent background file is in the images directory here.

Answer 6 · 2016-10-12T11:08:54.000Z

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! 😄

Answer 7 · 2016-10-12T11:10:20.000Z

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!

Answer 8 · 2016-10-12T14:21:18.000Z

@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.

Answer 9 · 2016-10-12T14:43:42.000Z

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?

Answer 10 · 2016-10-13T10:40:42.000Z

Done! Looks great!

Thanks @neuroAmyo 😄