Vertical Navigation Dotes

 /* "vertical-menu-box" class add outer(main)section and "vertical-side-menu" class add menu(ul)*/

/* Elementor Vertical Navigation Dots css*/
.vertical-menu-box {
    height: 0;
}
.vertical-side-menu{
transform: translate(0,-50%);
}
.vertical-menu-box .elementor-nav-menu--main ul li a{
width: 22px;
height: 22px;
background: none;
border-radius: 50%;
position: relative;
}
.vertical-menu-box .elementor-nav-menu--main ul li a span{
display: none;
}
.vertical-menu-box .elementor-nav-menu--main ul li a:before{
content: '';
display: block;
width: 8px;
height: 8px;
background: #f3f2f3;
opacity: 0.5 !important;
border-radius: 50%;
position: absolute;
top: 7px;
left: 7px;
transition: all 0.4s ease;
}
.vertical-menu-box .elementor-nav-menu--main ul li a:after{
content: '';
display: block;
width: 22px;
height: 22px;
background: none !important;
border: 1px solid #f3f2f3;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
opacity: 1 !important;
    transform: scale(0);
    transition: all 0.4s ease;
}
.vertical-menu-box .elementor-nav-menu--main ul li a.elementor-item-active:after{
transform: scale(1);
}
.vertical-menu-box .elementor-nav-menu--main ul li a.elementor-item-active:before{
opacity: 1 !important;
}


/* Gutenberg Vertical Navigation Dots css*/ 
ul.vertical-side-menu{
margin: 0;
padding: 0;
}
ul.vertical-side-menu li{
list-style: none;
width: 20px;
height: 20px;
margin-bottom: 13px;
}
.vertical-menu-box{
height: 0;
}
.vertical-menu-box .portable-nav ul li a{
width: 22px;
height: 22px;
background: none;
border-radius: 50%;
position: relative;
}
.vertical-menu-box .portable-nav ul li a span{
display: none;
}
.vertical-menu-box .portable-nav ul li a:before{
content: '';
display: block;
width: 8px;
height: 8px;
background: #FEFFFF;
border-radius: 50%;
position: absolute;
top: 7px;
left: 7px;
transition: all 0.4s ease;
}
.vertical-menu-box .portable-nav ul li a:after{
content: '';
display: block;
width: 22px;
height: 22px;
background: none !important;
border: 1px solid #FEFFFF;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
    transform: scale(0);
    transition: all 0.4s ease;
}
.vertical-menu-box .portable-nav{
position: fixed;
    right: 7%;
    top: 35%;
    z-index: 100;
}


/* Add Header & Footer Option Page in wordpress left penal(add function.php) */
/*
//Add Global Option to admin side
//theme setting

if( function_exists('acf_add_options_page') ) {

acf_add_options_page(array(
'page_title' => 'Theme General Settings',
'menu_title' => 'Theme Settings',
'menu_slug' => 'theme-general-settings',
'capability' => 'edit_posts',
'redirect' => false
));

acf_add_options_sub_page(array(
'page_title' => 'Theme Header Settings',
'menu_title' => 'Header',
'parent_slug' => 'theme-general-settings',
));

acf_add_options_sub_page(array(
'page_title' => 'Theme Footer Settings',
'menu_title' => 'Footer',
'parent_slug' => 'theme-general-settings',
));
}
*/


/* Add Vertical Menu Navigation widget in page block(add function.php)
shortcode = [portable_menu  menu_name="Your Menu Name"]*/
/*
add_shortcode('portable_menu', function($atts){
ob_start();
        $atts = shortcode_atts( array(
            'menu_name' => ''
        ), $atts, 'portable_menu' );
        wp_nav_menu(
        array(
            'menu' => $atts['menu_name'],
            'container' => 'div',
            'container_class' => 'portable-nav',
            'menu_class' => 'vertical-side-menu',
            )
        );
return ob_get_clean();
});
*/

/* Smooth Scroll JS for vertical navigation(add function.js) */
/*
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
if(this.hash){
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
// window.location.hash = target;
});
}
});
});
*/