Waypoints Menu Colour Change

Developer
Peter Appleyard
Size
12,183 Kb
Views
16,192
  1. Waypoints Menu Colour Change Previews
  2. Waypoints Menu Colour Change HTML Codes
  3. Waypoints Menu Colour Change CSS Codes
  4. Waypoints Menu Colour Change JS Codes

How do I make an waypoints menu colour change?

Change the menu color using waypoints, forked from this fiddle - Using SVGs http://jsfiddle.net/jebNn/3/. What is a waypoints menu colour change? How do you make a waypoints menu colour change? This script and codes were developed by Peter Appleyard on 06 October 2022, Thursday.

Waypoints Menu Colour Change Previews
IQ Test

Waypoints Menu Colour Change - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Waypoints Menu Colour Change</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="right"> <div class="navLeft"> <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44 225.2" enable-background="new 0 0 44 225.2" xml:space="preserve"> <g> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M4.9,108.6c-1.6,0.2-3.5,0.3-4.6,2.8c-0.5,1.1-0.3,2.3,0.3,3.2 c0.6,0.9,1.4,1.6,2.3,1.9c1,0.4,2.3,0.1,3.5,0c1.1-0.1,2.2-0.4,3.2-0.8c1-0.3,1.8-0.7,2.8-1c1-0.3,2.2-0.6,3.2-0.9 c1.3-0.4,3-0.6,3.3-1.1c0.3-0.4-2.1-1.2-3.4-1.6c-1.7-0.5-2.5-0.9-4-1.4C9.2,109.1,7.3,108.4,4.9,108.6 M10.5,111.8 c-0.6,0.6-1.5,0.8-2.5,1.4c-1.1,0.6-2.7,2.4-3.6,1.7c1.1-1.1,2.7-2,3.9-2.7C9.1,111.8,10,111.1,10.5,111.8z M8.3,110.8 c-1.9,1.4-3.8,2.2-5.6,3.5c-0.1-0.1-0.2,0-0.3-0.2c1-0.9,2-1.6,3.2-2.2C6.4,111.3,7.5,110.2,8.3,110.8z M5.2,110.6 c-1.2,0.8-2.3,1.3-3.5,2.3c-0.1-0.1-0.2,0-0.3-0.2c0.1-1.3,1.3-1.6,2.2-2C4.3,110.5,5.1,110,5.2,110.6z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M21,41.1c-1.4,2.5-2.1,5.4-2.1,8.2c0,2.4,0.2,4.8,0.5,7.2c0.6,3.6,0.7,7.2,2,10.2 c0.6,1.6,1.3,3.1,2.1,4.7c0.8,1.6,1.5,3.6,2.1,5.4c0.6,1.5,1.3,2.8,2,3.9c1.1,1.6,2.3,3.5,3.3,5.9c0.5,1.2,0.9,2.6,1.2,4.2 c0,0.2,0.1,0.4,0.1,0.6l0.1,0.3l0.2,0.6c0.2,0.4,0.3,0.9,0.5,1.4c0.4,1.4,0.9,3.6,0.5,5.9l-0.1,0.5c0,0.2-0.1,0.3-0.1,0.4 c-0.1,0.3-0.2,0.5-0.3,0.8c-0.2,0.5-0.5,1-0.9,1.4c-0.7,0.9-1.5,1.7-2.5,2.4c-1.9,1.3-4.2,2.1-6.3,2.1c-2.4,0-5.1-0.9-7-2.6 c-0.9-0.9-1.6-1.9-1.9-3.2c-0.1-0.6-0.2-1.3-0.1-2c0.1-0.7,0.2-1.3,0.5-2.1c0.6-1.5,2.4-3.1,4.3-2.6c1.9,0.5,0.1,1.7,0.1,3.4 c0,1,1.1,2.8,2.5,3c0.5,0.1,1.3-0.1,2-0.5c0.7-0.4,1.4-0.9,1.6-1.5c0.6-1.3,0.8-3.7,0.2-4.7c-0.5-1-1.3-1.9-2.1-2.6 c-1.2-0.9-2.4-1.2-4.4-1.3c-2.7-0.2-4.7,1.9-5.7,4.5c-0.5,1.3-0.8,2.7-0.9,3.9c-0.1,1.4,0,2.8,0.3,4c1.6,6.2,7,7.6,12.2,6.9 c2.8-0.4,5-1.2,7.1-3.2c1-1,1.5-1.6,2.1-2.7c0.6-1.1,1-2.2,1.3-3.3c0.1-0.6,0.3-1.7,0.4-2.4c0.1-0.8,0.1-1.5,0.1-2.2 c0-1.4-0.1-2.5-0.2-3.4L36.1,92l0-0.3l0-0.1l0-0.2l0-0.4c0-1-0.1-1.9-0.2-2.8c-0.4-2.8-1.1-4.9-1.8-6.4c-0.8-1.1-1.5-2.7-2.2-4.9 c-0.6-1.6-1.2-3.8-2-5.4c-0.8-1.6-1.6-2.9-2.3-4.2c-0.8-1.2-1.5-2.3-2-3.5c-0.6-1.3-0.9-3-1.4-4.8c-0.6-1.9-1-3.7-1.4-5.7 c-0.2-1-0.7-2-0.8-3c-0.4-2.4-0.2-5.4,0.8-8c1-2.6,2.6-4.8,5.1-5.7c0.7-0.3,1.5-0.5,2.3-0.5c2.6,0.2,4.5,1.6,5.2,3 c0.3,0.7,0.5,1.4,0.5,2.1c0,0.3-0.1,0.7-0.2,1c-0.1,0.3-0.3,0.6-0.5,0.9c-0.3,0.4-0.3,0.9-1.3,0.9c-0.1-1.1,0-2.1-0.7-2.8 c-0.4-0.4-1.9-1.1-3.1-0.7c-0.4,0.1-0.9,0.5-1.2,0.9c-0.3,0.4-0.6,0.9-0.7,1.4c-0.3,1.4,0.4,3.6,1.1,4.3c1.4,1.6,4.4,1.7,6.1,0.7 c0.8-0.5,1.8-1.7,2.5-3.1c0.3-0.7,0.6-1.4,0.8-2.1c0.2-0.8,0.3-1.6,0.2-2.4c-0.2-2.6-1.7-4.4-3.7-5.4c-1.3-0.6-2.8-0.9-4.2-0.8 c-1.2,0.1-2.9,0.7-3.8,1.1C24.4,36.6,22.4,38.6,21,41.1 M23.8,97.7c0,1-1.3,0.9-1.7,0.4C22.3,97.4,23.1,97.7,23.8,97.7z M16.2,93.8 c0-0.4,0.1-0.6,0.5-0.5C16.7,93.6,16.6,93.9,16.2,93.8z M34.2,91.4l0.2,0.2c0.1,0.1,0.2,0.3,0.2,0.4c0.1,0.3,0.1,0.7,0,1.1 c-0.3,0-0.4-0.4-0.5-0.7c-0.1-0.2-0.2-0.4-0.2-0.6l0-0.3l0-0.2l0.1-0.3L34.2,91.4z M33.8,89.3c-0.9-0.2-1-1.3-1-2.4 c0.2,0,0.2,0,0.3-0.1C33.8,87.2,34,88,33.8,89.3z M32.7,85.4c-0.3,0.4-0.6,0.1-0.8-0.2C31.6,84.4,33.2,84.6,32.7,85.4z M30.6,79 c-0.2,0.8-1.6,0.6-1.5-0.4C29.1,77.3,30.7,78.4,30.6,79z M29.1,74.1c0.5,0.3,0.9,1.6,0.7,2.1c-0.2,0.3-1.4,0.5-1.8,0.3 c-0.6-0.3-0.8-1.2-0.8-2C27.7,74.8,28.5,73.8,29.1,74.1z M28.2,71.3c0.9,1.1-0.6,2.3-1.7,1.5l-0.2-0.5C26,71.6,27.8,70.8,28.2,71.3 z M24.9,70c0.1-1,1.2-0.8,1.8-1.1C27.3,70.1,25.8,70.7,24.9,70z M25.9,67.1c0.4,1-2.1,1.8-2,0.2C24.5,67.2,25.6,66.4,25.9,67.1z M24.3,64.6c0.5,0.2,0.7,0.6,0.5,1c0,0-1.5,0.7-1.9,0.4l-0.1-0.5c0,0-0.2-0.3-0.1-0.4C22.8,64.9,24,64.5,24.3,64.6z M23.1,61.6 c0.2,0,0.9,1.1,0.7,1.5c0,0.1-1.1,0.7-1.3,0.6c-0.3-0.1-0.5-0.3-0.5-0.8c0-0.2-0.1-0.5,0-0.7c0.3-0.5,0.2,0.1,0.6-0.1 C23.1,61.9,22.7,61.6,23.1,61.6z M22.8,60.5c-0.8,0.2-1.9-0.3-1.3-1C21.9,59.1,23.2,59.2,22.8,60.5z M21,57.8 c-0.1-0.5,0.3-0.7,0.6-1C22.8,57.3,21.2,58.8,21,57.8z M21.3,55.8c-0.6-0.1-0.5-0.8-0.2-1.2C21.6,54.6,21.6,55.5,21.3,55.8z M21,53.4c-0.7,0-0.5-0.8-0.4-1.4C21.1,52.1,21.1,52.8,21,53.4z M29.5,43.8c0.1-0.5,0-0.7,0.3-0.9c1-0.5,1.5,0.7,0.8,1.5 C30.1,45,29.4,45.2,29.5,43.8z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M38.3,0c-1.9,0.2-3.4,2-3.1,3.7c0.1,0.6,0.5,1.6,0.9,1.9c0.3,0.3,1,0.6,1.9,0 c0.8-0.5,1.1-0.8,1.2-1.5c0.2-0.9-0.1-1.4,0.3-1.6c0.3-0.2,1.3,0.6,1.6,1.1c0.3,0.5,0.4,2.2-0.3,3.4c-1.5,2.5-4.8,4-7.5,6.7 c-1.3,1.2-1.9,2.4-2.4,3.8c-0.7,1.6-0.9,3.1-0.9,5.2c0,0.6,0.2,1.5,0.4,2.2c0.4,1.8,1.5,3.7,3.5,5.7c0.5,0.6,2.6,1.8,3.4,1.9 c0.1,0,0.3,0,0.4-0.2c0.4-0.5-1.1-2.9-1.4-3.8c-1-2.5-1.6-4.9-1.5-6.7c0.1-1,0.5-3.1,1-4.1c1.6-3.4,6-5.2,7.5-8.9 c0.4-0.9,0.6-1.9,0.7-3c0-1-0.2-2.2-0.8-3.1c-0.5-0.8-1.6-1.8-2.3-2.2C40.5,0.3,38.8-0.1,38.3,0 M35,28c0.1,0.3-0.5,0.6-0.6,0.3 C34.4,28.2,34.9,27.5,35,28z M34.5,26.3c-0.1,0.5-0.9,0.8-1.3,1.2c-0.2-0.3-0.4-0.5-0.4-0.8C33.4,26.4,34,25.9,34.5,26.3z M33.6,23.5c-1.1,0.4-0.3,1.4-0.7,1.8c-0.8,0.8-1.4-1.3-1.2-1.7C32,23.3,33.5,23.3,33.6,23.5z M33.5,20.6c-0.5,0.1-1.1,0.6-1.7,0.7 c-0.6-1,0.3-0.9,0.7-0.9C33.1,20.3,33.9,20.1,33.5,20.6z M34.3,18.2c0.1,0.5-0.1,0.6-0.7,0.9c-0.2,0.1-1.5,0.3-1.7,0 c-0.2-0.3,0.1-1.4,0.7-1.6C33.1,17.2,34.3,18.1,34.3,18.2z M35.4,15.7c0.1,0.4-0.3,1-0.9,1.1c-0.3,0-0.9-0.3-1-0.6 C33.4,15.4,35.1,14.3,35.4,15.7z M36.9,13.5c0.2,0.4-0.7,1.2-1.1,0.6C36.1,13.4,36.7,13,36.9,13.5z M39,11.7 c-0.3,0.2-0.7,0.7-0.9,0.4C38.2,11.7,38.8,11.3,39,11.7z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M26.5,86.8c-0.2-0.8-0.8-1.9-1-2.4c-0.3-0.6-0.7-1.3-1.1-2 c-0.5-0.9-0.9-1.7-1.4-2.5c-0.5-0.9-1-1.8-1.5-2.6C20.4,75.6,19,74,17.2,73c-1.1-0.6-2.5-1-3.8-0.9c-1.3,0.1-2.4,0.7-3,1.8 c-0.9,2,0.2,4.1,2,5.5c1.8,1.4,4.4,2.2,5.9,2.9c1.4,0.6,2.6,1.6,3.7,2.6c1.3,1.1,2.6,2.3,3.6,3.8c0.2,0.2,1,1.3,1.1,1.3 C27.4,89.9,26.8,87.8,26.5,86.8 M11.6,74.9c0.3,0.3,0.4,1.2,0,1.6C11.1,75.8,11.2,75.3,11.6,74.9z M12.9,78.3 c-0.6-0.8-0.3-3.1,0-3.8c0.5,0.6,0.4,1.1,0.5,2c0.1,0.5,0.6,1.8,0,2.1L12.9,78.3z M14.4,76.2c-0.1-0.7-0.6-2.5,0.3-2.6 c0.6-0.1,0.8,2,0.8,2.4c0,0.5,0,1,0,1.4c0,0.9,0.4,1.8-0.2,1.9C14.5,78.9,14.5,77.5,14.4,76.2z M16.7,79.9 c-0.2-0.2-0.2-0.9-0.3-1.5c-0.1-1.1-0.2-2-0.2-2.9c0-0.5,0-1,0.3-1.3c0.9,0.2,0.9,1.4,1,2.7l0.2,1.6c0,0.3,0.2,1.4,0.1,1.6 C17.4,80.6,16.8,80.1,16.7,79.9z M18.5,78.3c-0.1-1-0.2-2.2,0.1-2.5c0.8,0.6,0.9,1.7,1,2.6c0.2,1,0.2,2,0.3,2.8 C18.7,81.7,18.5,79.6,18.5,78.3z M20.7,81.4c-0.2-0.8-0.4-2.2,0.2-2.6c0.5,1.5,1,2.8,0.8,4.1C20.9,82.6,20.8,82.1,20.7,81.4z M22.9,82.7c0.4,0.5,0.8,1,0.6,1.5C22.9,83.9,22.8,83.1,22.9,82.7z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M13.1,122.3c-0.3,1.2-0.4,2.7-0.3,4c0.1,1.2,0.4,2.6,0.9,3.9 c1,2.6,2.9,4.7,5.7,4.5c2-0.1,3.1-0.4,4.4-1.3c0.9-0.6,1.7-1.6,2.2-2.6c0.5-1.1,0.4-3.4-0.2-4.7c-0.3-0.6-0.9-1.1-1.6-1.5 c-0.7-0.4-1.5-0.6-2-0.5c-1.4,0.2-2.5,2.1-2.5,3c0,1.6,1.8,2.9-0.1,3.4c-1.9,0.5-3.7-1.1-4.3-2.6c-0.3-0.8-0.5-1.4-0.5-2.1 c-0.1-0.7,0-1.4,0.1-2c0.3-1.2,1-2.3,1.9-3.2c1.8-1.7,4.6-2.7,7-2.6c2.1,0,4.4,0.8,6.3,2.2c0.9,0.7,1.8,1.5,2.5,2.4 c0.3,0.5,0.6,0.9,0.9,1.4c0.1,0.3,0.2,0.5,0.3,0.8c0,0.1,0.1,0.3,0.1,0.4l0.1,0.6c0.4,2.2-0.1,4.4-0.5,5.9c-0.2,0.5-0.3,1-0.5,1.4 l-0.2,0.6l-0.1,0.3c0,0.1-0.1,0.4-0.1,0.6c-0.3,1.6-0.7,3-1.2,4.2c-1,2.4-2.2,4.3-3.3,5.9c-0.7,1.1-1.4,2.4-2,3.9 c-0.7,1.7-1.4,3.7-2.1,5.4c-0.7,1.6-1.5,3.2-2.1,4.7c-1.3,3-1.4,6.6-2,10.2c-0.3,2.5-0.4,4.8-0.5,7.2c0,2.8,0.7,5.7,2.1,8.2 c1.4,2.5,3.4,4.5,5.9,5.6c1,0.4,2.6,1.1,3.8,1.1c1.5,0.1,2.9-0.2,4.2-0.8c2-0.9,3.5-2.7,3.7-5.4c0.1-0.8,0-1.6-0.2-2.4 c-0.2-0.7-0.5-1.4-0.8-2.1c-0.7-1.4-1.6-2.6-2.4-3.1c-1.7-0.9-4.7-0.8-6.1,0.7c-0.6,0.7-1.4,2.9-1.1,4.3c0.1,0.5,0.4,1,0.7,1.4 c0.3,0.5,0.8,0.8,1.2,0.9c1.2,0.4,2.7-0.4,3.1-0.7c0.7-0.7,0.7-1.7,0.7-2.8c1,0,1,0.5,1.3,0.9c0.2,0.3,0.4,0.6,0.5,0.9 c0.1,0.3,0.2,0.6,0.2,1c0,0.7-0.1,1.3-0.5,2.1c-0.7,1.4-2.6,2.8-5.2,3c-0.7,0-1.6-0.2-2.3-0.5c-2.4-0.9-4.1-3.1-5.1-5.6 c-0.9-2.6-1.1-5.6-0.8-8c0.2-1,0.6-2,0.8-3c0.4-2,0.8-3.7,1.4-5.7c0.5-1.7,0.8-3.5,1.4-4.8c0.6-1.2,1.3-2.3,2-3.5 c0.8-1.2,1.6-2.6,2.3-4.2c0.8-1.5,1.4-3.7,2-5.4c0.7-2.2,1.4-3.9,2.2-5c0.7-1.5,1.5-3.6,1.8-6.4c0.1-0.9,0.2-1.8,0.2-2.8l0-0.4 l0-0.2l0-0.1l0-0.3l0.1-0.6c0.1-0.9,0.2-2,0.2-3.3c0-0.7-0.1-1.4-0.1-2.2c-0.1-0.7-0.2-1.8-0.4-2.4c-0.3-1.2-0.7-2.3-1.3-3.4 c-0.6-1.1-1.1-1.7-2.1-2.7c-2.2-2.1-4.3-2.8-7.1-3.2C20.1,114.7,14.7,116.1,13.1,122.3 M16.7,132c-0.3,0.1-0.5-0.1-0.5-0.5 C16.6,131.4,16.7,131.6,16.7,132z M22.2,127.2c0.3-0.6,1.6-0.6,1.7,0.4C23.1,127.6,22.3,127.9,22.2,127.2z M29.8,182.3 c-0.3-0.2-0.3-0.4-0.3-0.9c-0.2-1.4,0.6-1.3,1.1-0.6C31.3,181.6,30.9,182.8,29.8,182.3z M20.6,173.3c-0.1-0.6-0.3-1.3,0.4-1.4 C21.1,172.5,21.1,173.1,20.6,173.3z M21.1,170.7c-0.3-0.4-0.4-1.1,0.2-1.2C21.6,169.8,21.6,170.6,21.1,170.7z M21.6,168.5 c-0.3-0.3-0.7-0.6-0.6-1C21.2,166.5,22.8,167.9,21.6,168.5z M22.8,164.8c0.4,1.3-0.9,1.3-1.3,1C20.9,165,22,164.6,22.8,164.8z M23.8,162.1c0.2,0.4-0.5,1.5-0.7,1.5c-0.4,0.1,0-0.2-0.4-0.5c-0.3-0.2-0.3,0.3-0.6-0.1c-0.2-0.2-0.1-0.5,0-0.7 c0-0.5,0.2-0.7,0.5-0.8C22.7,161.4,23.8,162,23.8,162.1z M24.7,159.6c0.2,0.4,0,0.8-0.5,1c-0.3,0.1-1.4-0.3-1.6-0.5 c-0.1-0.1,0.1-0.4,0.1-0.4l0-0.5C23.2,158.9,24.7,159.6,24.7,159.6z M25.9,158.1c-0.3,0.7-1.4-0.1-2-0.2 C23.8,156.3,26.2,157.1,25.9,158.1z M26.7,156.3c-0.7-0.3-1.7-0.1-1.8-1.1C25.8,154.6,27.3,155.1,26.7,156.3z M28.2,154 c-0.4,0.4-2.2-0.3-2-1l0.2-0.5C27.6,151.7,29.1,152.9,28.2,154z M29.8,149c0.2,0.4-0.2,1.8-0.7,2.1c-0.6,0.3-1.4-0.7-1.9-0.4 c0-0.8,0.1-1.7,0.8-2C28.4,148.5,29.6,148.7,29.8,149z M30.6,146.3c0.1,0.6-1.5,1.7-1.5,0.4C29,145.7,30.5,145.5,30.6,146.3z M32.7,139.8c0.5,0.9-1.1,1-0.8,0.2C32.1,139.7,32.4,139.4,32.7,139.8z M33.1,138.4c0-0.1-0.1-0.2-0.3-0.1c0-1.1,0.1-2.2,1-2.4 C34,137.3,33.8,138.1,33.1,138.4z M34.6,133.2c0,0.2-0.1,0.3-0.2,0.4l-0.2,0.2l-0.2,0.4l-0.1-0.3l0-0.2l0-0.3 c0-0.2,0.1-0.4,0.2-0.6c0.1-0.3,0.3-0.7,0.5-0.7C34.7,132.5,34.6,132.9,34.6,133.2z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M30.4,200.4c-0.2,0.7-0.4,1.5-0.4,2.2c0,2,0.2,3.6,0.9,5.2 c0.6,1.4,1.2,2.6,2.4,3.8c2.7,2.6,6,4.2,7.5,6.7c0.7,1.2,0.6,2.9,0.3,3.4c-0.3,0.5-1.3,1.3-1.6,1.1c-0.4-0.2-0.1-0.7-0.3-1.6 c-0.2-0.7-0.5-1.1-1.2-1.5c-0.9-0.5-1.6-0.2-1.9,0c-0.4,0.3-0.8,1.3-0.9,1.9c-0.3,1.7,1.1,3.5,3.1,3.7c0.5,0.1,2.2-0.3,2.5-0.5 c0.8-0.4,1.8-1.4,2.3-2.2c0.6-0.9,0.9-2,0.8-3.1c0-1.1-0.3-2.2-0.7-3c-1.6-3.7-5.9-5.5-7.5-8.9c-0.5-1-0.9-3-1-4.1 c-0.1-1.8,0.4-4.3,1.5-6.8c0.4-0.9,1.8-3.4,1.4-3.8c-0.1-0.2-0.3-0.2-0.4-0.1c-0.8,0.1-2.9,1.3-3.4,1.9 C31.9,196.7,30.9,198.6,30.4,200.4 M39,213.6c-0.3,0.4-0.9-0.1-0.9-0.4C38.4,212.8,38.7,213.3,39,213.6z M36.9,211.8 c-0.3,0.5-0.8,0-1.1-0.6C36.3,210.5,37.1,211.4,36.9,211.8z M35.4,209.6c-0.3,1.3-2,0.3-1.9-0.5c0-0.3,0.7-0.7,1-0.6 C35.1,208.5,35.5,209.2,35.4,209.6z M33.6,206.1c0.6,0.3,0.8,0.5,0.7,0.9c0,0.1-1.2,1-1.7,0.7c-0.6-0.3-0.9-1.3-0.7-1.7 C32.1,205.8,33.4,206,33.6,206.1z M33.5,204.6c0.4,0.6-0.4,0.3-1,0.2c-0.4,0-1.3,0.1-0.7-0.9C32.3,204,32.9,204.6,33.5,204.6z M32.9,199.9c0.4,0.4-0.3,1.4,0.7,1.8c-0.2,0.2-1.7,0.2-1.9-0.1C31.5,201.2,32.1,199.1,32.9,199.9z M34.5,198.9 c-0.5,0.4-1.1-0.1-1.7-0.5c0-0.2,0.2-0.5,0.4-0.7C33.6,198.1,34.4,198.4,34.5,198.9z M35,197.2c-0.2,0.5-0.6-0.2-0.6-0.3 C34.5,196.6,35.2,196.9,35,197.2z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M21.5,148c0.6-0.9,1-1.7,1.5-2.6c0.5-0.9,0.9-1.6,1.4-2.6c0.4-0.7,0.8-1.3,1.1-2 c0.2-0.4,0.8-1.6,1-2.4c0.3-1.1,0.9-3.2,0.3-3.3c-0.2,0-1,1.1-1.1,1.3c-1,1.5-2.3,2.6-3.6,3.8c-1.2,1.1-2.3,2-3.7,2.7 c-1.5,0.7-4.1,1.5-5.9,2.9c-1.9,1.4-3,3.5-2,5.5c0.6,1.1,1.7,1.8,3,1.8c1.3,0.1,2.7-0.3,3.8-0.9C19,151.2,20.4,149.7,21.5,148 M23.5,141.1c0.2,0.5-0.3,1-0.6,1.5C22.8,142.2,22.9,141.3,23.5,141.1z M21.7,142.4c0.2,1.3-0.4,2.6-0.8,4.1 c-0.5-0.4-0.3-1.8-0.2-2.6C20.8,143.1,20.9,142.6,21.7,142.4z M19.9,144c-0.1,0.8-0.1,1.8-0.3,2.8c-0.2,0.9-0.2,2.1-1,2.6 c-0.3-0.3-0.2-1.5-0.1-2.5C18.5,145.7,18.7,143.5,19.9,144z M16.7,145.3c0.1-0.2,0.7-0.7,1.1-0.3c0.1,0.1,0,1.3-0.1,1.6l-0.2,1.6 c-0.1,1.3-0.1,2.5-1,2.7c-0.3-0.3-0.3-0.8-0.3-1.3c0-0.8,0.1-1.8,0.2-2.9C16.5,146.2,16.5,145.5,16.7,145.3z M11.6,148.7 c0.4,0.4,0.3,1.4,0,1.6C11.2,149.9,11.1,149.4,11.6,148.7z M12.9,147l0.5-0.2c0.6,0.2,0.1,1.6,0,2.1c-0.1,0.8,0,1.4-0.5,2 C12.6,150,12.4,147.8,12.9,147z M14.4,149.1c0.2-1.3,0.2-2.7,0.9-3.2c0.6,0.1,0.2,1,0.2,1.9c0,0.5,0.1,0.9,0,1.4 c0,0.4-0.2,2.6-0.8,2.4C13.8,151.6,14.3,149.7,14.4,149.1z"/> </g> </svg> </div> <ul> <li><a href="#introducing">about</a></li> <li><a href="#crafted">crafted</a></li> <li><a href="#process">process</a></li> <li><a href="#cocktails">cocktails</a></li> </ul> <div class="navRight"> <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44 225.2" enable-background="new 0 0 44 225.2" xml:space="preserve"> <g> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M39,116.6c1.6-0.2,3.5-0.3,4.6-2.8c0.5-1.1,0.3-2.3-0.3-3.2 c-0.6-0.9-1.4-1.6-2.3-1.9c-1-0.4-2.3-0.1-3.5,0c-1.1,0.1-2.2,0.4-3.2,0.8c-1,0.3-1.8,0.7-2.8,1c-1,0.3-2.2,0.6-3.2,0.9 c-1.3,0.4-3,0.6-3.3,1.1c-0.3,0.4,2.1,1.2,3.4,1.6c1.7,0.5,2.5,0.9,4,1.4C34.8,116.2,36.7,116.9,39,116.6 M33.5,113.5 c0.6-0.6,1.5-0.8,2.5-1.4c1.1-0.6,2.7-2.4,3.6-1.7c-1.1,1.1-2.7,2-3.9,2.7C34.9,113.4,33.9,114.1,33.5,113.5z M35.7,114.4 c1.9-1.4,3.8-2.2,5.6-3.5c0.1,0.1,0.2,0,0.3,0.2c-1,0.9-2,1.6-3.2,2.2C37.6,113.9,36.5,115,35.7,114.4z M38.8,114.6 c1.2-0.8,2.3-1.3,3.5-2.3c0.1,0.1,0.2,0,0.3,0.2c-0.1,1.3-1.3,1.6-2.2,2C39.7,114.8,38.9,115.2,38.8,114.6z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M23,184.1c1.4-2.5,2.1-5.4,2.1-8.2c0-2.4-0.2-4.8-0.5-7.2 c-0.6-3.6-0.7-7.2-2-10.2c-0.6-1.6-1.3-3.1-2.1-4.7c-0.8-1.6-1.5-3.6-2.1-5.4c-0.6-1.5-1.3-2.8-2-3.9c-1.1-1.6-2.3-3.5-3.3-5.9 c-0.5-1.2-0.9-2.6-1.2-4.2c0-0.2-0.1-0.4-0.1-0.6l-0.1-0.3l-0.2-0.6c-0.2-0.4-0.3-0.9-0.5-1.4c-0.4-1.4-0.9-3.6-0.5-5.9l0.1-0.5 c0-0.2,0.1-0.3,0.1-0.4c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.5,0.5-1,0.9-1.4c0.7-0.9,1.5-1.7,2.5-2.4c1.9-1.3,4.2-2.1,6.3-2.1 c2.4,0,5.1,0.9,7,2.6c0.9,0.9,1.6,1.9,1.9,3.2c0.1,0.6,0.2,1.3,0.1,2c-0.1,0.7-0.2,1.3-0.5,2.1c-0.6,1.5-2.4,3.1-4.3,2.6 c-1.9-0.5-0.1-1.7-0.1-3.4c0-1-1.1-2.8-2.5-3c-0.5-0.1-1.3,0.1-2,0.5c-0.7,0.4-1.4,0.9-1.6,1.5c-0.6,1.3-0.8,3.7-0.2,4.7 c0.5,1,1.3,1.9,2.1,2.6c1.2,0.9,2.4,1.2,4.4,1.3c2.7,0.2,4.7-1.9,5.7-4.5c0.5-1.3,0.8-2.7,0.9-3.9c0.1-1.4,0-2.8-0.3-4 c-1.6-6.2-7-7.6-12.2-6.9c-2.8,0.4-5,1.2-7.1,3.2c-1,1-1.5,1.6-2.1,2.7c-0.6,1.1-1,2.2-1.3,3.3c-0.1,0.6-0.3,1.7-0.4,2.4 c-0.1,0.8-0.1,1.5-0.1,2.2c0,1.4,0.1,2.5,0.2,3.4l0.1,0.6l0,0.3l0,0.1l0,0.2l0,0.4c0,1,0.1,1.9,0.2,2.8c0.4,2.8,1.1,4.9,1.8,6.4 c0.8,1.1,1.5,2.7,2.2,4.9c0.6,1.6,1.2,3.8,2,5.4c0.8,1.6,1.6,2.9,2.3,4.2c0.8,1.2,1.5,2.3,2,3.5c0.6,1.3,0.9,3,1.4,4.8 c0.6,1.9,1,3.7,1.4,5.7c0.2,1,0.7,2,0.8,3c0.4,2.4,0.2,5.4-0.8,8c-1,2.6-2.6,4.8-5.1,5.7c-0.7,0.3-1.5,0.5-2.3,0.5 c-2.6-0.2-4.5-1.6-5.2-3c-0.3-0.7-0.5-1.4-0.5-2.1c0-0.3,0.1-0.7,0.2-1c0.1-0.3,0.3-0.6,0.5-0.9c0.3-0.4,0.3-0.9,1.3-0.9 c0.1,1.1,0,2.1,0.7,2.8c0.4,0.4,1.9,1.1,3.1,0.7c0.4-0.1,0.9-0.5,1.2-0.9c0.3-0.4,0.6-0.9,0.7-1.4c0.3-1.4-0.4-3.6-1.1-4.3 c-1.4-1.6-4.4-1.7-6.1-0.7c-0.8,0.5-1.8,1.7-2.5,3.1c-0.3,0.7-0.6,1.4-0.8,2.1c-0.2,0.8-0.3,1.6-0.2,2.4c0.2,2.6,1.7,4.4,3.7,5.4 c1.3,0.6,2.8,0.9,4.2,0.8c1.2-0.1,2.9-0.7,3.8-1.1C19.5,188.6,21.6,186.6,23,184.1 M20.1,127.5c0-1,1.3-0.9,1.7-0.4 C21.7,127.9,20.8,127.6,20.1,127.5z M27.8,131.4c0,0.4-0.1,0.6-0.5,0.5C27.3,131.6,27.4,131.4,27.8,131.4z M9.8,133.8l-0.2-0.2 c-0.1-0.1-0.2-0.3-0.2-0.4c-0.1-0.3-0.1-0.7,0-1.1c0.3,0,0.4,0.4,0.5,0.7c0.1,0.2,0.2,0.4,0.2,0.6l0,0.3l0,0.2l-0.1,0.3L9.8,133.8z M10.1,135.9c0.9,0.2,1,1.3,1,2.4c-0.2,0-0.2,0-0.3,0.1C10.2,138.1,9.9,137.3,10.1,135.9z M11.3,139.8c0.3-0.4,0.6-0.1,0.8,0.2 C12.4,140.8,10.8,140.7,11.3,139.8z M13.3,146.2c0.2-0.8,1.6-0.6,1.5,0.4C14.8,147.9,13.2,146.8,13.3,146.2z M14.9,151.1 c-0.5-0.3-0.9-1.6-0.7-2.1c0.2-0.3,1.4-0.5,1.8-0.3c0.6,0.3,0.8,1.2,0.8,2C16.2,150.4,15.5,151.4,14.9,151.1z M15.8,154 c-0.9-1.1,0.6-2.3,1.7-1.5l0.2,0.5C18,153.6,16.2,154.4,15.8,154z M19.1,155.2c-0.1,1-1.2,0.8-1.8,1.1 C16.6,155.1,18.2,154.6,19.1,155.2z M18.1,158.1c-0.4-1,2.1-1.8,2-0.2C19.5,158,18.4,158.8,18.1,158.1z M19.7,160.6 c-0.5-0.2-0.7-0.6-0.5-1c0,0,1.5-0.7,1.9-0.4l0.1,0.5c0,0,0.2,0.3,0.1,0.4C21.1,160.4,20,160.7,19.7,160.6z M20.9,163.6 c-0.2,0-0.9-1.1-0.7-1.5c0-0.1,1.1-0.7,1.3-0.6c0.3,0.1,0.5,0.3,0.5,0.8c0,0.2,0.1,0.5,0,0.7c-0.3,0.5-0.2-0.1-0.6,0.1 C20.9,163.4,21.3,163.7,20.9,163.6z M21.2,164.8c0.8-0.2,1.9,0.3,1.3,1C22.1,166.1,20.7,166,21.2,164.8z M22.9,167.5 c0.1,0.5-0.3,0.7-0.6,1C21.1,167.9,22.7,166.5,22.9,167.5z M22.7,169.5c0.6,0.1,0.5,0.8,0.2,1.2C22.4,170.6,22.4,169.8,22.7,169.5z M22.9,171.9c0.7,0,0.5,0.8,0.4,1.4C22.8,173.1,22.9,172.5,22.9,171.9z M14.4,181.4c-0.1,0.5,0,0.7-0.3,0.9c-1,0.5-1.5-0.7-0.8-1.5 C13.9,180.2,14.6,180,14.4,181.4z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M5.7,225.2c1.9-0.2,3.4-2,3.1-3.7c-0.1-0.6-0.5-1.6-0.9-1.9c-0.3-0.3-1-0.6-1.9,0 c-0.8,0.5-1.1,0.8-1.2,1.5c-0.2,0.9,0.1,1.4-0.3,1.6c-0.3,0.2-1.3-0.6-1.6-1.1c-0.3-0.5-0.4-2.2,0.3-3.4c1.5-2.5,4.8-4,7.5-6.7 c1.3-1.2,1.9-2.4,2.4-3.8c0.7-1.6,0.9-3.1,0.9-5.2c0-0.6-0.2-1.5-0.4-2.2c-0.4-1.8-1.5-3.7-3.5-5.7c-0.5-0.6-2.6-1.8-3.4-1.9 c-0.1,0-0.3,0-0.4,0.2c-0.4,0.5,1.1,2.9,1.4,3.8c1,2.5,1.6,4.9,1.5,6.7c-0.1,1-0.5,3.1-1,4.1c-1.6,3.4-6,5.2-7.5,8.9 c-0.4,0.9-0.6,1.9-0.7,3c0,1,0.2,2.2,0.8,3.1c0.5,0.8,1.6,1.8,2.3,2.2C3.5,224.9,5.2,225.3,5.7,225.2 M8.9,197.2 c-0.1-0.3,0.5-0.6,0.6-0.3C9.5,197,9.1,197.7,8.9,197.2z M9.5,198.9c0.1-0.5,0.9-0.8,1.3-1.2c0.2,0.3,0.4,0.5,0.4,0.8 C10.5,198.8,9.9,199.3,9.5,198.9z M10.3,201.7c1.1-0.4,0.3-1.4,0.7-1.8c0.8-0.8,1.4,1.3,1.2,1.7C12,202,10.5,201.9,10.3,201.7z M10.5,204.6c0.5-0.1,1.1-0.6,1.7-0.7c0.6,1-0.3,0.9-0.7,0.9C10.9,204.9,10.1,205.2,10.5,204.6z M9.7,207.1 c-0.1-0.5,0.1-0.6,0.7-0.9c0.2-0.1,1.5-0.3,1.7,0c0.2,0.3-0.1,1.4-0.7,1.6C10.8,208,9.7,207.2,9.7,207.1z M8.6,209.6 c-0.1-0.4,0.3-1,0.9-1.1c0.3,0,0.9,0.3,1,0.6C10.5,209.8,8.9,210.9,8.6,209.6z M7.1,211.8c-0.2-0.4,0.7-1.2,1.1-0.6 C7.9,211.8,7.3,212.2,7.1,211.8z M4.9,213.6c0.3-0.2,0.7-0.7,0.9-0.4C5.8,213.5,5.2,213.9,4.9,213.6z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M17.5,138.5c0.2,0.8,0.8,1.9,1,2.4c0.3,0.6,0.7,1.3,1.1,2 c0.5,0.9,0.9,1.7,1.4,2.5c0.5,0.9,1,1.8,1.5,2.6c1.1,1.7,2.5,3.3,4.3,4.3c1.1,0.6,2.5,1,3.8,0.9c1.3-0.1,2.4-0.7,3-1.8 c0.9-2-0.2-4.1-2-5.5c-1.8-1.4-4.4-2.2-5.9-2.9c-1.4-0.6-2.6-1.6-3.7-2.6c-1.3-1.1-2.6-2.3-3.6-3.8c-0.2-0.2-1-1.3-1.1-1.3 C16.6,135.3,17.2,137.4,17.5,138.5 M32.4,150.3c-0.3-0.3-0.4-1.2,0-1.6C32.8,149.4,32.8,149.9,32.4,150.3z M31,147 c0.6,0.8,0.3,3.1,0,3.8c-0.5-0.6-0.4-1.1-0.5-2c-0.1-0.5-0.6-1.8,0-2.1L31,147z M29.6,149c0.1,0.7,0.6,2.5-0.3,2.6 c-0.6,0.1-0.8-2-0.8-2.4c0-0.5,0-1,0-1.4c0-0.9-0.4-1.8,0.2-1.9C29.5,146.3,29.5,147.7,29.6,149z M27.3,145.3 c0.2,0.2,0.2,0.9,0.3,1.5c0.1,1.1,0.2,2,0.2,2.9c0,0.5,0,1-0.3,1.3c-0.9-0.2-0.9-1.4-1-2.7l-0.2-1.6c0-0.3-0.2-1.4-0.1-1.6 C26.6,144.6,27.2,145.1,27.3,145.3z M25.5,146.9c0.1,1,0.2,2.2-0.1,2.5c-0.8-0.6-0.9-1.7-1-2.6c-0.2-1-0.2-2-0.3-2.8 C25.3,143.5,25.4,145.7,25.5,146.9z M23.3,143.9c0.2,0.8,0.4,2.2-0.2,2.6c-0.5-1.5-1-2.8-0.8-4.1C23.1,142.6,23.1,143.1,23.3,143.9 z M21.1,142.6c-0.4-0.5-0.8-1-0.6-1.5C21,141.3,21.2,142.1,21.1,142.6z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M30.9,103c0.3-1.2,0.4-2.7,0.3-4c-0.1-1.2-0.4-2.6-0.9-3.9 c-1-2.6-2.9-4.7-5.7-4.5c-2,0.1-3.1,0.4-4.4,1.3c-0.9,0.6-1.7,1.6-2.2,2.6c-0.5,1.1-0.4,3.4,0.2,4.7c0.3,0.6,0.9,1.1,1.6,1.5 c0.7,0.4,1.5,0.6,2,0.5c1.4-0.2,2.5-2.1,2.5-3c0-1.6-1.8-2.9,0.1-3.4c1.9-0.5,3.7,1.1,4.3,2.6c0.3,0.8,0.5,1.4,0.5,2.1 c0.1,0.7,0,1.4-0.1,2c-0.3,1.2-1,2.3-1.9,3.2c-1.8,1.7-4.6,2.7-7,2.6c-2.1,0-4.4-0.8-6.3-2.2c-0.9-0.7-1.8-1.5-2.5-2.4 c-0.3-0.5-0.6-0.9-0.9-1.4c-0.1-0.3-0.2-0.5-0.3-0.8c0-0.1-0.1-0.3-0.1-0.4l-0.1-0.6c-0.4-2.2,0.1-4.4,0.5-5.9 c0.2-0.5,0.3-1,0.5-1.4l0.2-0.6l0.1-0.3c0-0.1,0.1-0.4,0.1-0.6c0.3-1.6,0.7-3,1.2-4.2c1-2.4,2.2-4.3,3.3-5.9c0.7-1.1,1.4-2.4,2-3.9 c0.7-1.7,1.4-3.7,2.1-5.4c0.7-1.6,1.5-3.2,2.1-4.7c1.3-3,1.4-6.6,2-10.2c0.3-2.5,0.4-4.8,0.5-7.2c0-2.8-0.7-5.7-2.1-8.2 c-1.4-2.5-3.4-4.5-5.9-5.6c-1-0.4-2.6-1.1-3.8-1.1c-1.5-0.1-2.9,0.2-4.2,0.8c-2,0.9-3.5,2.7-3.7,5.4c-0.1,0.8,0,1.6,0.2,2.4 c0.2,0.7,0.5,1.4,0.8,2.1c0.7,1.4,1.6,2.6,2.4,3.1c1.7,0.9,4.7,0.8,6.1-0.7c0.6-0.7,1.4-2.9,1.1-4.3c-0.1-0.5-0.4-1-0.7-1.4 c-0.3-0.5-0.8-0.8-1.2-0.9c-1.2-0.4-2.7,0.4-3.1,0.7c-0.7,0.7-0.7,1.7-0.7,2.8c-1,0-1-0.5-1.3-0.9c-0.2-0.3-0.4-0.6-0.5-0.9 c-0.1-0.3-0.2-0.6-0.2-1c0-0.7,0.1-1.3,0.5-2.1c0.7-1.4,2.6-2.8,5.2-3c0.7,0,1.6,0.2,2.3,0.5c2.4,0.9,4.1,3.1,5.1,5.6 c0.9,2.6,1.1,5.6,0.8,8c-0.2,1-0.6,2-0.8,3c-0.4,2-0.8,3.7-1.4,5.7c-0.5,1.7-0.8,3.5-1.4,4.8c-0.6,1.2-1.3,2.3-2,3.5 c-0.8,1.2-1.6,2.6-2.3,4.2c-0.8,1.5-1.4,3.7-2,5.4c-0.7,2.2-1.4,3.9-2.2,5c-0.7,1.5-1.5,3.6-1.8,6.4C8,89.2,8,90.1,7.9,91.1l0,0.4 l0,0.2l0,0.1l0,0.3l-0.1,0.6c-0.1,0.9-0.2,2-0.2,3.3c0,0.7,0.1,1.4,0.1,2.2c0.1,0.7,0.2,1.8,0.4,2.4c0.3,1.2,0.7,2.3,1.3,3.4 c0.6,1.1,1.1,1.7,2.1,2.7c2.2,2.1,4.3,2.8,7.1,3.2C23.8,110.6,29.3,109.1,30.9,103 M27.3,93.3c0.3-0.1,0.5,0.1,0.5,0.5 C27.4,93.9,27.3,93.6,27.3,93.3z M21.8,98.1c-0.3,0.6-1.6,0.6-1.7-0.4C20.8,97.6,21.7,97.4,21.8,98.1z M14.1,42.9 c0.3,0.2,0.3,0.4,0.3,0.9c0.2,1.4-0.6,1.3-1.1,0.6C12.6,43.6,13.1,42.4,14.1,42.9z M23.4,52c0.1,0.6,0.3,1.3-0.4,1.4 C22.9,52.7,22.8,52.1,23.4,52z M22.9,54.6c0.3,0.4,0.4,1.1-0.2,1.2C22.4,55.5,22.4,54.6,22.9,54.6z M22.3,56.7 c0.3,0.3,0.7,0.6,0.6,1C22.7,58.8,21.1,57.3,22.3,56.7z M21.2,60.5c-0.4-1.3,0.9-1.3,1.3-1C23.1,60.2,22,60.6,21.2,60.5z M20.2,63.1c-0.2-0.4,0.5-1.5,0.7-1.5c0.4-0.1,0,0.2,0.4,0.5c0.3,0.2,0.3-0.3,0.6,0.1c0.2,0.2,0.1,0.5,0,0.7c0,0.5-0.2,0.7-0.5,0.8 C21.3,63.8,20.2,63.2,20.2,63.1z M19.2,65.6c-0.2-0.4,0-0.8,0.5-1c0.3-0.1,1.4,0.3,1.6,0.5c0.1,0.1-0.1,0.4-0.1,0.4l0,0.5 C20.8,66.4,19.2,65.6,19.2,65.6z M18.1,67.1c0.3-0.7,1.4,0.1,2,0.2C20.2,68.9,17.7,68.1,18.1,67.1z M17.2,68.9 c0.7,0.3,1.7,0.1,1.8,1.1C18.2,70.7,16.6,70.1,17.2,68.9z M15.8,71.3c0.4-0.4,2.2,0.3,2,1l-0.2,0.5C16.4,73.5,14.9,72.3,15.8,71.3z M14.2,76.2c-0.2-0.4,0.2-1.8,0.7-2.1c0.6-0.3,1.4,0.7,1.9,0.4c0,0.8-0.1,1.7-0.8,2C15.6,76.7,14.4,76.5,14.2,76.2z M13.3,79 c-0.1-0.6,1.5-1.7,1.5-0.4C14.9,79.6,13.5,79.8,13.3,79z M11.3,85.4c-0.5-0.9,1.1-1,0.8-0.2C11.9,85.5,11.5,85.9,11.3,85.4z M10.8,86.8c0,0.1,0.1,0.2,0.3,0.1c0,1.1-0.1,2.2-1,2.4C9.9,88,10.2,87.2,10.8,86.8z M9.4,92c0-0.2,0.1-0.3,0.2-0.4l0.2-0.2 l0.2-0.4l0.1,0.3l0,0.2l0,0.3c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.3-0.3,0.7-0.5,0.7C9.3,92.7,9.3,92.3,9.4,92z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M13.5,24.9c0.2-0.7,0.4-1.5,0.4-2.2c0-2-0.2-3.6-0.9-5.2 c-0.6-1.4-1.2-2.6-2.4-3.8c-2.7-2.6-6-4.2-7.5-6.7C2.4,5.9,2.5,4.2,2.8,3.7c0.3-0.5,1.3-1.3,1.6-1.1c0.4,0.2,0.1,0.7,0.3,1.6 C4.9,4.9,5.2,5.2,6,5.7c0.9,0.5,1.6,0.2,1.9,0c0.4-0.3,0.8-1.3,0.9-1.9C9,2,7.6,0.2,5.7,0C5.2-0.1,3.5,0.3,3.2,0.5 C2.4,0.9,1.4,1.9,0.8,2.7C0.2,3.6,0,4.7,0,5.8c0,1.1,0.3,2.2,0.7,3c1.6,3.7,5.9,5.5,7.5,8.9c0.5,1,0.9,3,1,4.1 c0.1,1.8-0.4,4.3-1.5,6.8c-0.4,0.9-1.8,3.4-1.4,3.8c0.1,0.2,0.3,0.2,0.4,0.1c0.8-0.1,2.9-1.3,3.4-1.9 C12.1,28.6,13.1,26.7,13.5,24.9 M4.9,11.7c0.3-0.4,0.9,0.1,0.9,0.4C5.6,12.4,5.2,11.9,4.9,11.7z M7.1,13.5c0.3-0.5,0.8,0,1.1,0.6 C7.7,14.7,6.8,13.9,7.1,13.5z M8.6,15.6c0.3-1.3,2-0.3,1.9,0.5c0,0.3-0.7,0.7-1,0.6C8.9,16.7,8.5,16,8.6,15.6z M10.4,19.1 c-0.6-0.3-0.8-0.5-0.7-0.9c0-0.1,1.2-1,1.7-0.7c0.6,0.3,0.9,1.3,0.7,1.7C11.9,19.4,10.6,19.2,10.4,19.1z M10.5,20.6 c-0.4-0.6,0.4-0.3,1-0.2c0.4,0,1.3-0.1,0.7,0.9C11.6,21.2,11,20.7,10.5,20.6z M11,25.3c-0.4-0.4,0.3-1.4-0.7-1.8 c0.2-0.2,1.7-0.2,1.9,0.1C12.5,24,11.8,26.1,11,25.3z M9.5,26.3c0.5-0.4,1.1,0.1,1.7,0.5c0,0.2-0.2,0.5-0.4,0.7 C10.3,27.2,9.6,26.8,9.5,26.3z M8.9,28c0.2-0.5,0.6,0.2,0.6,0.3C9.4,28.6,8.8,28.3,8.9,28z"/> <path class="navSvg" fill-rule="evenodd" clip-rule="evenodd" d="M22.5,77.3c-0.6,0.9-1,1.7-1.5,2.6c-0.5,0.9-0.9,1.6-1.4,2.6 c-0.4,0.7-0.8,1.3-1.1,2c-0.2,0.4-0.8,1.6-1,2.4c-0.3,1.1-0.9,3.2-0.3,3.3c0.2,0,1-1.1,1.1-1.3c1-1.5,2.3-2.6,3.6-3.8 c1.2-1.1,2.3-2,3.7-2.7c1.5-0.7,4.1-1.5,5.9-2.9c1.9-1.4,3-3.5,2-5.5c-0.6-1.1-1.7-1.8-3-1.8c-1.3-0.1-2.7,0.3-3.8,0.9 C25,74,23.6,75.6,22.5,77.3 M20.5,84.2c-0.2-0.5,0.3-1,0.6-1.5C21.2,83.1,21,83.9,20.5,84.2z M22.3,82.8c-0.2-1.3,0.4-2.6,0.8-4.1 c0.5,0.4,0.3,1.8,0.2,2.6C23.1,82.1,23.1,82.6,22.3,82.8z M24.1,81.2c0.1-0.8,0.1-1.8,0.3-2.8c0.2-0.9,0.2-2.1,1-2.6 c0.3,0.3,0.2,1.5,0.1,2.5C25.4,79.6,25.3,81.7,24.1,81.2z M27.3,79.9c-0.1,0.2-0.7,0.7-1.1,0.3c-0.1-0.1,0-1.3,0.1-1.6l0.2-1.6 c0.1-1.3,0.1-2.5,1-2.7c0.3,0.3,0.3,0.8,0.3,1.3c0,0.8-0.1,1.8-0.2,2.9C27.5,79,27.5,79.7,27.3,79.9z M32.4,76.5 c-0.4-0.4-0.3-1.4,0-1.6C32.8,75.3,32.8,75.8,32.4,76.5z M31,78.3l-0.5,0.2c-0.6-0.2-0.1-1.6,0-2.1c0.1-0.8,0-1.4,0.5-2 C31.3,75.2,31.6,77.5,31,78.3z M29.6,76.2c-0.2,1.3-0.2,2.7-0.9,3.2c-0.6-0.1-0.2-1-0.2-1.9c0-0.5-0.1-0.9,0-1.4 c0-0.4,0.2-2.6,0.8-2.4C30.2,73.7,29.7,75.5,29.6,76.2z"/> </g> </svg> </div> </nav>
<section id="top" class="one" data-menu-color-down='#FFF' data-menu-color-up='#000'> section content
</section>
<section id="introducing" class="two" data-menu-color-down='#000' data-menu-color-up='#FFF'> section content
</section>
<section id="crafted" class="three" data-menu-color-down='#fff' data-menu-color-up='#000'> section content
</section>
<section id="process" class="four" data-menu-color-down='#fff' data-menu-color-up='#FFF'> section content
</section>
<section id="cocktails" class="five" data-menu-color-down='#000' data-menu-color-up='#fff'> section content
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.4.13/jquery.smooth-scroll.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Waypoints Menu Colour Change - Script Codes CSS Codes

html, body { height: 100%; margin: 0; padding: 0;
}
nav.right { position: fixed; z-index: 3000; top: 70px; right: 70px;
}
nav.right .navLeft { width: 30px; display: inline-block; float: left;
}
nav.right .navRight { width: 30px; display: inline-block; margin: 0; float: left;
}
nav.right ul { margin: 0; padding: 0 10px; display: inline-block; float: left;
}
nav.right ul li { margin: 10px 0; padding: 0; text-align: center; list-style-type: none;
}
nav.right ul li a { font-family: "Latin Wide W01 D"; text-transform: uppercase; font-size: 13px; text-decoration: none; text-align: center; color: #FFF;
}
nav.right ul li a:hover { color: red;
}
section { padding: 20px; height: 100%;
}
.one, .four { background-color: #000; color: #FFF;
}
.two, .five { background-color: #FFF; color: #000;
}
.three { background-color: #999; color: #000;
}

Waypoints Menu Colour Change - Script Codes JS Codes

var myObj = { menuOffsets: {}, pageSections: [], init: function() { myObj.initMenuOffsets(); myObj.initSections(); myObj.initWaypoints(); }, initMenuOffsets: function() { $('.right a').each(function() { var self = $(this), href = self.attr('href'), menuItemHeight = self.height(); myObj.menuOffsets[href.substring(1, href.length)] = self.offset().top + self.height(); }); console.log(myObj.menuOffsets); }, initSections: function() { var sections = $('section'); sections.each(function() { var self = $(this); myObj.pageSections.push(self.attr('id')); }); console.log(myObj.pageSections); }, initWaypoints: function() { var menuItemColor, key, i = 0, len = myObj.pageSections.length; for ( i; i < len; i++ ) { for ( key in myObj.menuOffsets ) { if( myObj.menuOffsets.hasOwnProperty( key ) ) { (function ( key, i ) { $('#' + myObj.pageSections[i]).waypoint(function(direction) { var self = $(this); menuItemColor = self.data('menuColor' + (direction === 'up' ? 'Up' : 'Down')); $('.right a[href="#' + key + '"]').css('color', menuItemColor); $('.navSvg').css('fill', menuItemColor); }, { offset: myObj.menuOffsets[key] }); })(key, i); } } } }
};
myObj.init();
$('a').smoothScroll({ easing: 'swing', speed: 1400, preventDefault: true
});
Waypoints Menu Colour Change - Script Codes
Waypoints Menu Colour Change - Script Codes
Home Page Home
Developer Peter Appleyard
Username whodaman
Uploaded October 06, 2022
Rating 3
Size 12,183 Kb
Views 16,192
Do you need developer help for Waypoints Menu Colour Change?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Peter Appleyard (whodaman) Script Codes
Name
Simple SCSS Dropdown Nav
Isotope asc desc sorting
Slicknav testing
Cycle2 transparent overlay
Navigation Play
Slidebars js
Builtform Flexbox Grid
Toggle show hide jquery
Show and hide, based on webapp id business catalyst
Fox Grid
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!