Setting same anchor for multiple color-sections

Hey Themes_SuterGerteis,
Sorry for the late reply, thanks for the login, I took a look at your pages and believe I understand the issue: on your 3 pages the different sections are either hidden or shown based on screen size, in order for it to look and behave well for each screen size.
For example, on one page you have 3 IDs called “contact” and this causes the menu link to not work correctly.
The easiest solution is to create 3 contact menu links that target the 3 color sections, each using a different ID.
For exanple: #contact1, #contact2, #contact3
then hide the menu items along with the color sections, here is an example of css that hides the menu item and the section at the same time:

@media only screen and (max-width: 426px) { 
li.menu-item-54, .page-id-39 div#kontakt {
display: none !important;
}
}

every menu item has a number and after the comma it targets the section, so it will be easy to manage.

If you wish, I will assist on one such section, that you can model afterward for your other sections. To get started please create 3 contact menu items, each using a different anchor to each of the color sections.
Then tell us the screen sizes you wish each of the 3 sections to show.

Best regards,
Mike

Hi,
Thank you for preparing the menu, since you set up the elements to show or hide using the screen options we will leave these as they are and write the css to address the menu items.
This is the css I added to your Quick CSS:

/*#kontakt1 = menu-item-54 
#kontakt2 = menu-item-1178 
#kontakt3 = menu-item-1179 */

@media only screen and (max-width: 767px) { 
li.menu-item-54,li.menu-item-1178 {
display:none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 989px) { 
li.menu-item-54,li.menu-item-1179 {
display:none !important;
}
}
@media only screen and (min-width: 989px) {
li#menu-item-1178,li#menu-item-1179 {
display:none !important;
}
}

The top 3 lines is just a cheat sheet as to which menu items go with which item number.
Then there are the 3 media queries covering the 3 sizes you wanted with 2 menu items inside each one, set to “display:none”
Please note that the mobile menu uses the menu items as classes, where the main menu uses the same menu items as IDs
which is why some of the rules are “#menu-item-1179” and others are “.menu-item-1179”
Please clear your browser cache and check.

I hope this helps.
Best regards,
Mike