Menu behaving differently when a page is previewed versus loaded through links

Hi guys,

When I preview a page (e.g my home page) the URL (see “1” in private content) is provided. The menu behaves correctly under the following CSS:

.header_color .main_menu ul:first-child > li > a { color: white!important; }
.header_color .main_menu ul:first-child > li a:hover { color: #c4f1f2!important; }
.header_color .main_menu ul:first-child > li.current-menu-item > a,
.header_color .main_menu ul:first-child > li.current_page_item > a { color: #88e0e2!important; }

As you scroll through the different colour sections within the home page, the active menu item changes as it should do.

However, if you click the menu link “HOME” from the preview, the webpage understandably loads URL “2”. At this point, the entire menu behaves differently. All menu items act as if they are activated. When scrolled at the top of the page, the menu links darken in colour as you hover over them. If you scroll down to make the header shrink, the menu links no longer recognise mousing over them. The links no longer react to the colour sections and the URL remains with #home at the end rather than changing to #about, #saas-fee…etc.

Is there a solution to make the menu behave in the exact same way as is does in the preview state? I’m assuming the menu won’t behave like it does when pages are previewed once the site is live.

Thank you,

James