First Color-Section

dot#1
layout for your page

All Code here on the page is for this specific page-id
you had to adjust it to your needs

  • create a page where you have color-sections – set to 100% height.
  • each of the color-sections got a unique ID.
  • on top place a fullwidth submenu
    ( you can even use here an existing one ! But do not fix it here )
  • the labels can be what you like to have
    ( for better understanding i named it like this now)
  • the targets are the unique ID’s of the color-sections.

Second Color-Section

dot#2
this comes to child-theme functions.php

function active_scroll_submenu(){
if(is_page(518)){
?>
<script>
(function($){
"use strict";
$(document).ready(function($) {            
            var targetMenu = $(".av-subnav-menu"),
                corectorHeight = window.outerHeight/2,
                menuItems =  targetMenu.find('a[href*="#"]'),
                scrollItems = menuItems.map(function(){
                  var href = $(this).attr("href"),
                  id = href.substring(href.indexOf('#')),
                  item = $(id);
                  if (item.length) { return item; }
                });

            $(window).scroll(function(){
               var fromTop = $(this).scrollTop()+corectorHeight;
               var cur = scrollItems.map(function(){
                 if ($(this).offset().top < fromTop)
                   return this;
               });
               cur = cur[cur.length-1];
               var id = cur && cur.length ? cur[0].id : "";               
               menuItems.parent().removeClass("inview");
               if(id){ menuItems.parent().end().filter("[href*='#"+id+"']").parent().addClass("inview");}
            })
        })
})( jQuery );
</script>
<?php
}
}
add_action('wp_footer', 'active_scroll_submenu');

Third Color-Section

dot#3
This is for quick css and left side dot navigation

/******** Dot Side-Menu with active State left side ****************/

    .page-id-518 #main .container {
        padding: 0px 50px 0px 180px;
    }

    .page-id-518 #sub_menu1 {
        position: fixed !important;
        left: 0;
        right: auto;
        width: 50px;
        top: 50% !important;
        transform: translateY(-50%);
        background-color: rgba(255,255,255,0.7);
        box-shadow: 3px 3px 15px -5px #333;
        border-radius: 0 15px 15px 0;
    }

    #top .av-subnav-menu {
      text-align: left;
      width: 280px;
    }

    #top .av-subnav-menu > li {
      display: block;
    }

    .page-id-518 #sub_menu1 li a {
        background-color: rgba(255,255,255,0);
    }

    .page-id-518 #sub_menu1 li a:before {
        content: "\e814";
        font-family: entypo-fontello;
        font-size: 25px;
        position: relative;
        right: 0;
        color: #000;
        vertical-align: middle;
    }

    .page-id-518 #sub_menu1 li a:hover:before {
        content: "\e817";
        transition: all 1s ease;
    }

    .page-id-518 #sub_menu1 + .sticky_placeholder{
      display: none !important;
    }

    .page-id-518 #sub_menu1 .avia-menu-text {
        position: relative;
        padding-left: 30px;
        color: #fff;
        opacity: 0 ;
        transition: opacity 1s ease;
        font-size: 18px;
        vertical-align: top;
        text-shadow: -1px 2px 3px #333;
    }

    .page-id-518 #sub_menu1 li a:hover .avia-menu-text {
        opacity: 1 !important;
        transition: opacity 1s ease;
    }

    /******** scroll states ***********/
    .page-id-518 #sub_menu1 li.inview a:before {
        content: "\e871";
        transition: all 1s ease;
    }

    .page-id-518 #sub_menu1 li.inview a .avia-menu-text {
        opacity: 1 !important;
        transition: opacity 1s ease;
    }

Fourth Color-Section

dot#4
This is for quick css and right side dot navigation

/******** Dot Side-Menu with active State right side ****************/

.page-id-518 #main .container {
    padding: 0px 90px 0px 50px;
}

.page-id-518 #sub_menu1 {
    position: fixed !important;
    left: auto;
    right: 0;
    width: 50px;
    top: 50% !important;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,0.7);
    box-shadow: -3px 3px 15px -5px #333;
    border-radius: 15px 0 0 15px;
}

.page-id-518 #sub_menu1 li a {
    background-color: rgba(255,255,255,0);
}

.page-id-518 #sub_menu1 li a:after {
    content: "\e814";
    font-family: entypo-fontello;
    font-size: 25px;
    position: relative;
    right: 45px;
    color: #000;
    vertical-align: middle;
}

.page-id-518 #sub_menu1 li a:hover:after {
    content: "\e817";
    transition: all 1s ease;
}

.page-id-518 #sub_menu1 + .sticky_placeholder{
  display: none !important;
}

.page-id-518 #sub_menu1 .avia-menu-text {
    position: relative;
    left: -80px;
    color: #fff;
    opacity: 0 ;
    transition: opacity 1s ease;
    font-size: 18px;
    vertical-align: middle;
}

.page-id-518 #sub_menu1 li a:hover .avia-menu-text {
    opacity: 1 !important;
    transition: opacity 1s ease; 
}

.page-id-518 #sub_menu1 + .sticky_placeholder{
  display: none !important;
}

/******** scroll states ***********/
.page-id-518 #sub_menu1 li.inview a:after {
    content: "\e888";
    transition: all 1s ease;
}

.page-id-518 #sub_menu1 li.inview a .avia-menu-text {
    opacity: 1 !important;
    transition: opacity 1s ease;
    text-shadow: -1px 2px 3px #333;
}

Fifth Color-Section

dot#5

This page belongs to : https://kriesi.at/support/topic/add-tooltip-to-dots-menu/

For small screens it might be usefull to have a different styling.
So it is better to have the css above only for screens bigger than 768px.
And for screens narrower it will be f.e. better to have the button nav on the bottom

@media only screen and (min-width: 768px) {
    .page-id-518 #main .container {
        padding: 0px 50px 0px 180px;
    }

    .page-id-518 #sub_menu1 {
        position: fixed !important;
        left: 0;
        right: auto;
        width: 50px;
        top: 50% !important;
        transform: translateY(-50%);
        background-color: rgba(255,255,255,0.7);
        box-shadow: 3px 3px 15px -5px #333;
        border-radius: 0 15px 15px 0;
    }

    #top .av-subnav-menu {
      text-align: left;
      width: 280px;
    }

    #top .av-subnav-menu > li {
      display: block;
    }

    .page-id-518 #sub_menu1 li a {
        background-color: rgba(255,255,255,0);
    }

    .page-id-518 #sub_menu1 li a:before {
        content: "\e814";
        font-family: entypo-fontello;
        font-size: 25px;
        position: relative;
        right: 0;
        color: #000;
        vertical-align: middle;
    }

    .page-id-518 #sub_menu1 li a:hover:before {
        content: "\e817";
        transition: all 1s ease;
    }

    .page-id-518 #sub_menu1 + .sticky_placeholder{
      display: none !important;
    }

    .page-id-518 #sub_menu1 .avia-menu-text {
        position: relative;
        padding-left: 30px;
        color: #fff;
        opacity: 0 ;
        transition: opacity 1s ease;
        font-size: 18px;
        vertical-align: top;
        text-shadow: -1px 2px 3px #333;
    }

    .page-id-518 #sub_menu1 li a:hover .avia-menu-text {
        opacity: 1 !important;
        transition: opacity 1s ease;
    }

    /******** scroll states ***********/
    .page-id-518 #sub_menu1 li.inview a:before {
        content: "\e871";
        transition: all 1s ease;
    }

    .page-id-518 #sub_menu1 li.inview a .avia-menu-text {
        opacity: 1 !important;
        transition: opacity 1s ease;
    }
}


@media only screen and (max-width: 767px) {
    .page-id-518 #sub_menu1 {
        position: fixed !important;
        left: 50%;
        right: unset;
        width: 300px;
        top: unset;
        bottom: 0% !important;
        transform: translateX(-50%);
        background-color: rgba(255,255,255,1);
        box-shadow: 0 -3px 15px -5px #333;
        border-radius: 15px 15px 0 0;
    }

    .page-id-518 #sub_menu1 li a {
        background-color: rgba(255,255,255,0);
    }

    .page-id-518 #sub_menu1 li a:after {
        content: "\e814";
        font-family: entypo-fontello;
        font-size: 25px;
        position: relative;
        right: 0;
        color: #000;
        vertical-align: middle;
    }

    .page-id-518 #sub_menu1 li a:hover:after {
        content: "\e817";
        transition: all 1s ease;
    }

    .page-id-518 #sub_menu1 + .sticky_placeholder,
    .page-id-518 #sub_menu1 .avia-menu-text {
      display: none !important;
    }

    #top .av-submenu-pos-center {
      display: flex;
      justify-content: space-between;
    }


    /******** scroll states ***********/
    .page-id-518 #sub_menu1 li.inview a:after {
        content: "\e88a";
        transition: all 1s ease;
    }
}