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
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.
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.
Showing 9 reactions
Sign in with
I assume I’m formatting “{{ site.full_url }}” incorrectly. I thought I should just plug in the URL I want the button to direct to, but that doesn’t seem to be working.
Websites > Theme This takes me to a page of themes, and if I select my theme – (which one was that again?) I don’t want to have to restore it.
Check by cStreet - Mobile event check-in for organizers
Certified Architect
Certified Developer