{"html":"<nav id=\"{{uc_id}}\" class=\"uc_icon_navbar {{alignment}} {{direction}}\">\n\t<ul class=\"uc_nav-menu\">\n\t\t{{put_items()}}\n\t<\/ul>\n<\/nav>","html_item":"<li>\n\t<a data-scroll=\"{{item.section_id|raw}}\" href=\"#{{item.section_id|raw}}\" class=\"uc_dot\">\n\t\t<span>{{item.title|raw}}<\/span>\n      \t<strong class=\"uc_icon icon_size icon_padding space_between_icons\"><i class=\"{{item.nav_icon}}\" aria-hidden=\"true\"><\/i><\/strong>\n\t<\/a>\n<\/li>","css":"#{{uc_id}}.uc_icon_navbar .uc_icon{\n  \tcolor: {{icon_color}};\n  \tbackground: {{icon_background}};\n  \tdisplay: inline-block;\n  \tmargin: {{space_between_icons}}px 0px;\n}\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li .uc_dot,\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li .uc_dot strong{\n  \ttransition: ease-in-out all 0.3s;\n   \t-webkit-transition: ease-in-out all 0.3s;\n  \tdisplay: inline-block;\n}\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li .uc_dot span{\n \tcolor: {{color}};\n  \tbackground-color: {{background}};\n  \tfont-size: {{font_size}}px;\n\t\n  \tposition: absolute;\n  \tleft: -25px;\n    display: block;\n    width: auto;\n    white-space: nowrap;\n    top: 50%;\n    transform: translate(-100%, -50%);\n}\n\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li .uc_dot span::before{\n  border-left-color: {{background}};\n}\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li {\n    padding:0;\n  \tmargin: 0;\n}\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu{\n  \tflex-flow: {{direction}};\n}\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li .uc_dot:hover i,\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li:hover .uc_dot.uc_active i{\n  color: {{icon_hover_color}};\n}\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li .uc_dot:hover strong,\n#{{uc_id}}.uc_icon_navbar .uc_nav-menu li:hover .uc_dot.uc_active strong{\n    background: {{icon_hover_background}};\n}\n\n\n{% if (alignment == \"left\") %}\n\/*Align Left*\/\n    #{{uc_id}}.uc_icon_navbar .uc_nav-menu li {\n        text-align:left;\n    }\n    #{{uc_id}}.uc_icon_navbar .uc_nav-menu li .uc_dot span{\n        left: inherit;\n        transform: translate(100%, -50%);\n        right: -25px;\n        margin: 0;\n    }\n    #{{uc_id}}.uc_icon_navbar.left .uc_nav-menu li .uc_dot span::before{\n      \tleft: -14px; right: inherit;\n        border-right: 7px solid {{background}};\n        border-left: 0px;\n      \twidth: 0;\n    }\n{% endif %}\n\n\n{% if (direction == \"row\") %}\n    \/*Position*\/\n    #{{uc_id}}.uc_icon_navbar .uc_nav-menu li{\n        margin: 10px 10px;\n    }\n\t#{{uc_id}}.uc_icon_navbar .uc_icon{\n      \t\n    }\n    #{{uc_id}}.uc_icon_navbar .uc_nav-menu li .uc_dot span{\n        left: 50%;\n        right: inherit;\n        transform: translateX(-50%) !important;\n        -webkit-transform: translate(-50%, 100%) !important;\n        margin: -25px 0 0 !important;\n        position: absolute;\n        white-space: nowrap;\n        top: 100%;\n    }\n    #{{uc_id}}.uc_icon_navbar.row .uc_nav-menu li .uc_dot span::before{\n        left: 50%;\n        right: inherit;\n        top: -10px;\n        transform: translateX(-50%) rotate(90deg);\n        -webkit-transform: translateX(-50%) rotate(90deg);\n        border-right: 7px solid\n        #f44336;\n        border-left: 0;\n        height: 0;\n    }\n    #{{uc_id}}.uc_icon_navbar.row .uc_nav-menu li .uc_dot::after {\n        left: calc(50% - 9px);\n        right: inherit;\n        top: 0;\n    }\n    #{{uc_id}}.uc_icon_navbar.row .uc_nav-menu li .uc_dot::before {\n        left: calc(50% - 4px);\n        right: inherit;\n        top: 0;\n    }\n\n\t #{{uc_id}}.uc_icon_navbar .uc_nav-menu li a.uc_dot{\n        flex-direction: unset;\n        display: inline-block;\n    }\n{% endif %}","js":"jQuery(document).ready(function() {\n\n  var link = jQuery('#{{uc_id}} .uc_nav-menu li a.uc_dot');\n\n  \/\/ Move to specific section when click on menu link\n  link.on('click', function(e) {\n    \n    var target = jQuery(jQuery(this).attr('href'));\n    jQuery('html, body').animate({\n      scrollTop: target.offset().top\n    }, 600);\n    jQuery(this).addClass('uc_active');\n    e.preventDefault();\n});\n  \n  \n\/\/ scrNav function \n  \/\/ Change active dot according to the active section in the window\nfunction scrNav() {\n    jQuery(\".elementor-section\").each(function() {\n\t\tvar e = jQuery(this);\n\t\te.offset().top - jQuery(window).height() \/ 2 < jQuery(window).scrollTop() && (e.offset().top >= jQuery(window).scrollTop() || e.offset().top + e.height() - jQuery(window).height() \/ 2 > jQuery(window).scrollTop()) ? jQuery('#{{uc_id}} ul li > a[data-scroll=\"' + e.attr(\"id\") + '\"]').addClass(\"uc_active\") : jQuery('#{{uc_id}} ul li > a[data-scroll=\"' + e.attr(\"id\") + '\"]').removeClass(\"uc_active\")\n\t});\n  }\n\t\n\t\/\/ Run the scrNav when scroll\n  jQuery(window).on('scroll', function(){\n    scrNav();\n  });\n\t\n  scrNav();\n  \n\n});"}