How can I change the color of my logo & navigation on my home page?

If you’re using a full-screen image on your home page, there’s a chance your logo and navigation may become illegible depending on the color of the image behind them.

With a little custom coding, you can change these colors on your home page to make sure your logo and navigation are always visible. Please note that this is an advanced technique, so follow the directions carefully if you decide to try it!


  1. First, use the design editor to set your logo and navigation button colors for the pages other than the home page. Once you have everything looking good on the other pages, we can customize how things look on the home page.

  2. If you’re using a graphic for your logo, you’ll need a place to upload your alternate logo graphic (If you’re using a plain text logo, you can skip to step 5). Create a new page on your site. Call it something like “Assets”, set it to “Hidden”, and make sure it’s set to be an image gallery. image

  3. Create an alternately-colored logo graphic and upload it to this new page you just created. It’s important that it’s the exact same size as your existing logo graphic, just with a different color.

  4. Now click on the thumbnail of your logo you just uploaded. The Title/Description area will be replaced with the URL to this file. Copy this URL for use later. image

  5. Go to your “Settings > Edit Custom Code” page and click the “Body” tab.

  6. To change the color of your logo, paste this code in the “Body” field, and change the “URL_GOES_HERE” to the URL you copied in step 4:

    <script>
        $('.alternate header h1 img').prop('src', 'URL_GOES_HERE');
    </script>
    

    image

  7. If you’d like to change the color of your navigation buttons as well, add this code to your “Head” field. You can change the “white” value to any color you like:

    <style>
        .alternate nav a { color: white !important; }
    </style>
    

    image

  8. Now we need to tell your website when to use these alternate colors we just setup:

    • If you’d like your home page to always use the alternate colors, paste this code into your Javascript field, before the code we already added, but after the “script” tag:

      $('#page-index').addClass('alternate');
      

      Like this:

      image

    • Or, if you only want to use the alternate colors only for certain home page images, paste this code into your Javascript field, changing “1392_slide_4681.jpg” to the file name of the image you’d like to trigger the alternate colors. Make sure to place this code before the code we already added, but still inside the “script” tag. (Note that this method will not work with slideshows on your home page. You must turn slideshows off in order for this to work properly):

      $('img[src$="1392_slide_4681.jpg"]').closest('body').addClass('alternate');
      

      You’ll need to make a copy of this line of code for each image you’d like to trigger the alternate colors, changing the file name to match the appropriate image for each one.

      image

      You can find the file names of your home page images by turning off the image download blocker add-on, if you have it enabled, going to your site’s home page, right clicking on your full screen image, then choosing "Open image in a new tab:

      image

      The image’s file name will be in the url, highlighted in this screenshot:

      image

  9. You’re done! Check your website to make sure it’s working!

color, alternate, alternating, logo, nav, buttons, black, white, light, dark, home, page, css, javascript, js, custom, design

Ask a question or leave a comment

comments powered by Disqus

Can't find what you're looking for? Email us at xxxxxxx@xxxxxxxx.xxx