We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.
If you want your logo and navigation colors to change on scroll, you can achieve this with a little bit of CSS code.
Note: This hack will only work if you are using a Cover section and inline-SVG for your logo. More info on this below.
Step 1: Setting Up the Navigation
Make sure your navigation is set to be transparent while it is overlaid on a Cover section. To do so, navigate to Customize > Navigations and edit your navigation bar. Find the option 'Transparent While in Cover,' and enable it.
Step 2: Copying Your SVG Code
SVG images are comprised of code. In your logo settings, you can paste your SVG in as code rather than upload it as an image.
To get the code for your SVG logo, find your logo SVG file on your computer and open it in a text editing program such as Notepad. Now copy this code and paste it into your logo settings.
Note: Be sure to only copy code starting with <svg> and ending with </svg>
Step 3: Pasting the SVG Code
You can now paste your SVG code as inline code right into Semplice. For the logo to change color, it must be inline SVG.
Step 4: Setting the Scroll Change With CSS
You can now set a color shift on both the logo and navigation items globally by placing the following code under Customize > Advanced > Custom CSS:
/* SVG Fill Color on Cover */
.semplice-navbar:not(.cover-transparent) .logo a svg path { fill: black !important; }
/* Menu Item Color on Cover */
.semplice-navbar:not(.cover-transparent) .menu-item a span { color: black !important; }
/* Hamburger and X Color on Cover */
.semplice-navbar:not(.cover-transparent) .navbar-inner .hamburger a.menu-icon span { background-color: black !important; }
You can also set the effect to take place on a page-by-page basis by placing the code under Branding > CSS editor within the page.