Skip to main content

Top nav: Editing one button

Hi, I would like to replace the Homepage button with an image of a home. So I need to replace the text with an image, does anyone know how I would affect just that button in the CSS? Can I replace the text, so far I have a background image but still the text over the top

Official response from

Elizabeth, 

The easiest way to do this is by editing the liquid in your _nav.html file located under Websites > Theme to hardcode the icon. 

You would include something like this right after <ul id="topnav"> and before the  {% for child in site.root_nav_pages %} line of code usually located on line 4 of the _nav.html file:

<ul id="topnav">

  <li class="home_icon"><a href="{{ site.full_url }}"><img src="home.png" width="25"></a>

 {% for child in site.root_nav_pages %}

"home_icon" would be a new class that you could style further in your theme.scss file, 'home.png' would be your icon uploaded to Pages>Theme>Files. You can adjust the dimensions to fit your needs.

Screen_Shot_2012-10-01_at_12.23.55_PM.png

 

If you wanted to have more control over the rollover effects of that icon, you could do something a bit more complex, like:

{% if page.is_homepage? %}<li class="active_home">{% else %}<li class="home_inactive">{% endif %}
<a href="{{ site.full_url }}"></a>

"active_home" and "home_inactive" would be styles you would edit in your theme.scss file to include the images as a background along with the desired look.

Please note: you will probably want to go to your homepage's settings and uncheck the "include in top nav" box to remove it from showing since you have now hardcoded a link to it.

Thanks.

Share this post

Showing 9 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.