CINXE.COM

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="google-site-verification" content="oEIXStPkz10e-rS6gJ06ZIfLKa-Qwft7pQSD9u5gPOY" />  <title>How to Create a Website Navigation Menu │ Tilda Help Center</title> <meta name="description" content="Menu design options, customization, tips and examples" /> <meta property="og:url" content="https://help.tilda.cc/design-menu" /> <meta property="og:title" content="How to Create a Website Navigation Menu │ Tilda Help Center" /> <meta property="og:description" content="Menu design options, customization, tips and examples" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://static.tildacdn.com/tild6631-3931-4232-b565-613263363030/bfbadge.png" /> <link rel="canonical" href="https://help.tilda.cc/design-menu">  <meta name="format-detection" content="telephone=no" /> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://ws.tildacdn.com"> <link rel="dns-prefetch" href="https://static.tildacdn.com"> <link rel="shortcut icon" href="https://static.tildacdn.com/img/tildafavicon.ico" type="image/x-icon" />  <script src="https://neo.tildacdn.com/js/tilda-fallback-1.0.min.js" async charset="utf-8"></script> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';"/> <link rel="stylesheet" href="https://static.tildacdn.com/ws/project6518/tilda-blocks-page11528849.min.css?t=1741774761" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-slds-1.4.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-slds-1.4.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" href="https://static.tildacdn.com/css/fonts-tildasans.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <script nomodule src="https://static.tildacdn.com/js/tilda-polyfill-1.0.min.js" charset="utf-8"></script> <script type="text/javascript">function t_onReady(func) {if(document.readyState!='loading') {func();} else {document.addEventListener('DOMContentLoaded',func);}} function t_onFuncLoad(funcName,okFunc,time) {if(typeof window[funcName]==='function') {okFunc();} else {setTimeout(function() {t_onFuncLoad(funcName,okFunc,time);},(time||100));}}window.onerror=function(m,f,l,c,e) {if(!window.t_jserrors)window.t_jserrors=[];window.t_jserrors.push({message:m,filename:f,lineno:l,colno:c,error:e});}</script> <script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-scripts-3.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/ws/project6518/tilda-blocks-page11528849.min.js?t=1741774761" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-lazyload-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-slds-1.4.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/hammer.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-video-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-menu-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-1.1.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-skiplink-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-events-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script>  <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:2424106,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script>  <script src="//static.tildacdn.com/js/tilda-cc-help-langs-dropdown.min.js"></script>  <link rel="alternate" hreflang="en" href="https://help.tilda.cc"> <link rel="alternate" hreflang="pt-br" href="https://pt.help.tilda.cc"> <link rel="alternate" hreflang="fr" href="https://fr.help.tilda.cc"> <link rel="alternate" hreflang="de" href="https://de.help.tilda.cc"> <link rel="alternate" hreflang="it" href="https://it.help.tilda.cc"> <link rel="alternate" hreflang="ja" href="https://ja.help.tilda.cc"> <link rel="alternate" hreflang="pl" href="https://pl.help.tilda.cc"> <link rel="alternate" hreflang="es" href="https://es.help.tilda.cc"> <script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script> <script> Weglot.initialize({ api_key: 'wg_371e0d36f0d1c87c9439e1bdc93a6fc18' }); </script><script type="text/javascript">window.dataLayer=window.dataLayer||[];</script> <script type="text/javascript">(function() {if((/bot|google|yandex|baidu|bing|msn|duckduckbot|teoma|slurp|crawler|spider|robot|crawling|facebook/i.test(navigator.userAgent))===false&&typeof(sessionStorage)!='undefined'&&sessionStorage.getItem('visited')!=='y'&&document.visibilityState){var style=document.createElement('style');style.type='text/css';style.innerHTML='@media screen and (min-width: 980px) {.t-records {opacity: 0;}.t-records_animated {-webkit-transition: opacity ease-in-out .2s;-moz-transition: opacity ease-in-out .2s;-o-transition: opacity ease-in-out .2s;transition: opacity ease-in-out .2s;}.t-records.t-records_visible {opacity: 1;}}';document.getElementsByTagName('head')[0].appendChild(style);function t_setvisRecs(){var alr=document.querySelectorAll('.t-records');Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_animated");});setTimeout(function() {Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_visible");});sessionStorage.setItem("visited","y");},400);} document.addEventListener('DOMContentLoaded',t_setvisRecs);}})();</script></head> <body class="t-body" style="margin:0;">  <div id="allrecords" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="6518" data-tilda-page-id="11528849" data-tilda-page-alias="design-menu" data-tilda-formskey="0bbdd5272d658d3de5798b262a4fe80b" data-tilda-cookie="no" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes"> <div id="rec194115195" class="r t-rec t-rec_pt_120 t-rec_pb_180" style="padding-top:120px;padding-bottom:180px;background-color:#f5f5f5; " data-animationappear="off" data-record-type="60" data-bg-color="#f5f5f5">  <div class="t050"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t050__uptitle t-uptitle t-uptitle_sm" field="subtitle"><a href="/">tilda help center</a></div> <h1 class="t050__title t-title t-title_xxl" field="title">How to Design a Website Menu</h1> <div class="t050__descr t-descr t-descr_xxl" field="descr">Menu design options, customization, tips, and examples<br /></div> </div> </div> </div> <style> #rec194115195 .t050__uptitle{text-transform:uppercase;}</style> </div> <div id="rec194115196" class="r t-rec t-rec_pt_120 t-rec_pb_45" style="padding-top:120px;padding-bottom:45px; " data-record-type="127">  <div class="t119"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div class="t119__preface t-descr" field="text">Explore 7 website menu designs, learn how to customize them, and find out how you can use them.</div> </div> </div> </div> <style> #rec194115196 .t119__preface{opacity:0.7;}</style> </div> <div id="rec194115197" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">This guide focuses on the menu design—what the menu looks like and how it works. If you want to learn how to design a website menu, display it on every page of your website, or create a navigation menu for a particular web page, we recommend that you read another guide:<br /></div> </div> </div> </div> </div> <div id="rec194115198" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <a class="t374__link" href="https://help.tilda.cc/menu" target="_blank"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title">How To Set Up a Website Menu</div> </div> </div> </a> </div> </div> </div> </div> <div id="rec194115199" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="372">  <div class="t372"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div class="t-divider t372__line " style="background-color: #ff5500;height: 3px;"></div> <div field="text" class="t372__text t-text t-text_md t-text_weight_plus">The navigation menu is a list of links that lead to various pages of your website or specific sections within a particular web page. It helps website visitors to navigate between the website pages or different sections of a specific page.</div> </div> </div> </div> </div> <div id="rec194115200" class="r t-rec t-rec_pt_30 t-rec_pb_30" style="padding-top:30px;padding-bottom:30px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title">General tips</div> </div> </div> </div> </div> <div id="rec194115201" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">></div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text">The menu should help website visitors find information quickly and easily</div> </div> </div> </div> </div> </div> </div> <div id="rec194115202" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">></div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text">The menu should be concise</div> </div> </div> </div> </div> </div> </div> <div id="rec194115203" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">></div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text">Keep the number of menu items to a minimum</div> </div> </div> </div> </div> </div> </div> <div id="rec194115204" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">></div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text">Add no more than five menu items to a navigation bar</div> </div> </div> </div> </div> </div> </div> <div id="rec194115205" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">></div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text">Make menu items no longer than one word</div> </div> </div> </div> </div> </div> </div> <div id="rec194115206" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">></div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text">It is best if that word is short</div> </div> </div> </div> </div> </div> </div> <div id="rec194115207" class="r t-rec t-rec_pt_15 t-rec_pb_120" style="padding-top:15px;padding-bottom:120px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">></div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text">Do not overdesign the menu navigation bar as it should not distract the user from the content of your website</div> </div> </div> </div> </div> </div> </div> <div id="rec194115208" class="r t-rec t-rec_pt_30 t-rec_pb_150" style="padding-top:30px;padding-bottom:150px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title">Menu design options<br /><br /></div> <div class="t120__descr t-descr t-descr_xs" field="subtitle"><div style="font-size: 22px; line-height: 32px;" data-customstyle="yes"><a href="#transparent">Transparent static menu over the cover</a><br /><a href="#fixed">Fixed menu</a><br /><a href="#appearsonscroll">Menu fixed on top of the page & menu that appears on scroll</a><br /><a href="#hamburger">Hamburger menu</a><br /><a href="#multilevel">Multilevel menu</a><br /><a href="#tabs">Tabs</a><br /><a href="#cart-search-fav">Menu with a shopping cart, search, and favorites icons</a> </div></div> </div> </div> </div> </div> <div id="rec194115209" class="r t-rec" style=" " data-record-type="394"> <style>#allrecords #rec8321778 .t-text a:not(.t-card__link),#allrecords #rec8321778 .t-descr a:not(.t-card__link),#allrecords #rec8321778 .t-heading a:not(.t-card__link):not(.t-feed__link),#allrecords #rec8321778 .t-title a:not(.t-card__link),#allrecords #rec8321778 .t-impact-text a:not(.t-card__link),#allrecords #rec8321778 .t-text-impact a:not(.t-card__link),#allrecords #rec8321778 .t-name:not(.t-feed__parts-switch-btn) a:not(.t794__typo):not(.t-menusub__link-item):not(.t-card__link):not(.t-feed__link),#allrecords #rec8321778 .t-uptitle a:not(.t-card__link){color:inherit;font-weight:inherit;border-bottom:1px solid #ff5500;-webkit-box-shadow:inset 0px -1px 0px 0px #ff5500;-moz-box-shadow:inset 0px -1px 0px 0px #ff5500;box-shadow:inset 0px -1px 0px 0px #ff5500;}</style> </div> <div id="rec194115210" class="r t-rec t-rec_pt_150 t-rec_pb_30" style="padding-top:150px;padding-bottom:30px;background-color:#f0f0f0; " data-animationappear="off" data-record-type="128" data-bg-color="#f0f0f0">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title">Examples of good menu designs</div> </div> </div> </div> </div> <div id="rec212656671" class="r t-rec t-rec_pt_60 t-rec_pb_120" style="padding-top:60px;padding-bottom:120px;background-color:#f0f0f0; " data-animationappear="off" data-record-type="670" data-bg-color="#f0f0f0">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left " aria-controls="carousel_212656671" aria-disabled="false" aria-label="Предыдущий слайд"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 25px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 25.3 49" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 24.5,24.5 0.5,48.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right " aria-controls="carousel_212656671" aria-disabled="false" aria-label="Следующий слайд"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 25px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 25.3 49" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 24.5,24.5 0.5,48.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_12 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_212656671" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3664-3830-4131-a339-643738393263/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__0"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3664-3830-4131-a339-643738393263/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3664-3830-4131-a339-643738393263/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6434-3537-4435-a637-613738323762/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__1"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6434-3537-4435-a637-613738323762/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6434-3537-4435-a637-613738323762/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="3" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="3 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3135-3734-4238-b537-363131313832/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__2"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3135-3734-4238-b537-363131313832/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3135-3734-4238-b537-363131313832/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="4" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="4 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6465-6464-4062-a132-643531313336/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__3"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6465-6464-4062-a132-643531313336/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6465-6464-4062-a132-643531313336/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="5" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="5 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6336-6566-4861-a664-316563666639/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__4"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6336-6566-4861-a664-316563666639/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6336-6566-4861-a664-316563666639/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="6" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="6 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3530-3632-4239-b934-353132643731/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__5"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3530-3632-4239-b934-353132643731/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3530-3632-4239-b934-353132643731/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="7" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="7 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3063-3435-4331-a563-656139626238/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__6"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3063-3435-4331-a563-656139626238/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3063-3435-4331-a563-656139626238/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="8" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="8 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6235-6465-4336-a632-363064663030/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__7"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6235-6465-4336-a632-363064663030/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6235-6465-4336-a632-363064663030/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="9" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="9 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6232-6363-4633-b335-653734393235/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__8"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6232-6363-4633-b335-653734393235/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6232-6363-4633-b335-653734393235/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="10" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="10 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3964-3835-4739-b436-663861643363/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__9"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3964-3835-4739-b436-663861643363/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3964-3835-4739-b436-663861643363/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="11" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="11 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3364-6466-4730-b166-666131666337/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__10"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3364-6466-4730-b166-666131666337/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3364-6466-4730-b166-666131666337/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="12" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="12 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3764-3633-4232-b533-386139373661/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__11"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3764-3633-4232-b533-386139373661/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3764-3633-4232-b533-386139373661/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="13" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="13 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6462-3134-4963-a336-666636376635/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__12"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6462-3134-4963-a336-666636376635/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6462-3134-4963-a336-666636376635/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="14" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="14 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6532-3235-4962-b637-303630363134/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__13"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6532-3235-4962-b637-303630363134/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6532-3235-4962-b637-303630363134/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="15" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="15 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3234-3133-4636-b039-666566333565/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__14"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3234-3133-4636-b039-666566333565/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3234-3133-4636-b039-666566333565/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="16" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="16 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6131-6437-4132-b437-316235656131/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__15"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6131-6437-4132-b437-316235656131/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6131-6437-4132-b437-316235656131/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="17" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="17 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6534-6339-4238-b638-306339653333/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__16"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6534-6339-4238-b638-306339653333/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6534-6339-4238-b638-306339653333/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="18" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="18 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3431-6662-4633-b666-656137353836/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__17"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3431-6662-4633-b666-656137353836/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3431-6662-4633-b666-656137353836/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="19" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="19 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6639-3737-4262-a632-393830396230/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__18"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6639-3737-4262-a632-393830396230/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6639-3737-4262-a632-393830396230/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="20" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="20 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3738-3163-4565-b534-316263396334/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__19"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3738-3163-4565-b534-316263396334/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3738-3163-4565-b534-316263396334/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="21" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="21 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6565-6533-4731-b561-633365323564/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__20"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild6565-6533-4731-b561-633365323564/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild6565-6533-4731-b561-633365323564/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> <div class="t-slds__item" data-slide-index="22" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="22 из 22"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3361-3435-4238-b330-303766613262/Screen_Shot_2020-07-.png"> <div class="t670__imgwrapper" bgimgfield="gi_img__21"> <div class="t-slds__bgimg t-slds__bgimg-contain t-bgimg" data-original="https://static.tildacdn.com/tild3361-3435-4238-b330-303766613262/Screen_Shot_2020-07-.png" style="background-image: url('https://thb.tildacdn.com/tild3361-3435-4238-b330-303766613262/-/resizeb/20x/Screen_Shot_2020-07-.png');"> </div> <div class="t670__separator" data-slider-image-width="1160" data-slider-image-height="650px"></div> </div> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 1" style="background-color: #c7c7c7;" aria-current="true"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 2" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="3"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 3" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="4"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 4" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="5"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 5" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="6"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 6" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="7"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 7" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="8"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 8" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="9"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 9" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="10"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 10" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="11"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 11" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="12"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 12" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="13"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 13" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="14"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 14" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="15"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 15" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="16"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 16" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="17"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 17" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="18"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 18" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="19"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 19" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="20"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 20" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="21"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 21" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="22"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 22" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('212656671',false);});});</script> <style>#rec212656671 .t-slds__bullet_active .t-slds__bullet_body{background-color:#ff5500 !important;}#rec212656671 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#ff5500 !important;}</style> </div> <div id="rec212677113" class="r t-rec" style=" " data-record-type="215"> <a name="transparent" style="font-size:0;"></a> </div> <div id="rec194115212" class="r t-rec t-rec_pt_165 t-rec_pb_75" style="padding-top:165px;padding-bottom:75px; " data-record-type="255">  <div class="t225"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t225__uptitle t-uptitle t-uptitle_sm" field="subtitle"><div style="color:rgba(0,0,0,0.3);" data-customstyle="yes">MENU DESIGN OPTIONS</div></div> <div class="t225__title t-title t-title_md" field="title">Transparent Static Menu over the Cover</div> </div> </div> </div> <style> #rec194115212 .t225__uptitle{text-transform:uppercase;}</style> </div> <div id="rec196058764" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">What it looks like: </span><br />Such a menu is pinned at the top of the page not to distract the website visitors from the content, and they can easily find it when necessary as it is fixed in a specific place on the page.<span style="font-weight: 500;"><br /></span></div> </div> </div> </div> </div> <div id="rec194115214" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6361-6238-4430-a137-393034323633/statik.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild6361-6238-4430-a137-393034323633/-/empty/statik.gif" data-original="https://static.tildacdn.com/tild6361-6238-4430-a137-393034323633/statik.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec194115215" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">How to set it up<span style="font-weight: 500;">: </span><br /><br />Add an ME301 block to the page and apply the following settings:<br /><br /><span style="font-weight: 400;">Main settings → Menu position behavior:</span> Absolute.<br /><span style="font-weight: 400;">Menu background → Menu background opacity:</span> 0%.</div> </div> </div> </div> </div> <div id="rec361822801" class="r t-rec t-rec_pt_90 t-rec_pb_90" style="padding-top:90px;padding-bottom:90px; " data-animationappear="off" data-record-type="670">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left t-slds__arrow-withbg" aria-controls="carousel_361822801" aria-disabled="false" aria-label="Предыдущий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right t-slds__arrow-withbg" aria-controls="carousel_361822801" aria-disabled="false" aria-label="Следующий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_12 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_361822801" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 из 2"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3536-6538-4034-b936-336532363632/position.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3536-6538-4034-b936-336532363632/-/empty/position.png" data-original="https://static.tildacdn.com/tild3536-6538-4034-b936-336532363632/position.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 из 2"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6163-3364-4032-a166-376261386466/opacity.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild6163-3364-4032-a166-376261386466/-/empty/opacity.png" data-original="https://static.tildacdn.com/tild6163-3364-4032-a166-376261386466/opacity.png" alt=""> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 1" style="background-color: #c7c7c7;" aria-current="true"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 2" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('361822801',false);});});</script> <style>#rec361822801 .t-slds__bullet_active .t-slds__bullet_body{background-color:#222 !important;}#rec361822801 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#222 !important;}</style> </div> <div id="rec194115217" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="37">  <div class="t022 t-align_center"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 t-prefix_3"> <div class="t022__text t-text t-text_sm" field="text"><a href="/design-menu/static-menu" target="_blank">Click here</a> to view an example of a transparent static menu on the website</div> </div> </div> </div> </div> </div> <div id="rec212677153" class="r t-rec" style=" " data-record-type="215"> <a name="fixed" style="font-size:0;"></a> </div> <div id="rec194115218" class="r t-rec t-rec_pt_165 t-rec_pb_75" style="padding-top:165px;padding-bottom:75px; " data-record-type="255">  <div class="t225"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t225__uptitle t-uptitle t-uptitle_sm" field="subtitle"><div style="color:rgba(0,0,0,0.3);" data-customstyle="yes">MENU DESIGN OPTIONS</div></div> <div class="t225__title t-title t-title_md" field="title">Fixed Menu</div> </div> </div> </div> <style> #rec194115218 .t225__uptitle{text-transform:uppercase;}</style> </div> <div id="rec194115219" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">What it looks like: </span><br />Such a menu is always visible on the page and can easily be accessed from any place on the page. It usually has a transparent background at the top of the page (on the cover) that turns opaque on scroll.<span style="font-weight: 500;"><br /></span></div> </div> </div> </div> </div> <div id="rec194115220" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3334-3931-4866-b936-396239633530/fix.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3334-3931-4866-b936-396239633530/-/empty/fix.gif" data-original="https://static.tildacdn.com/tild3334-3931-4866-b936-396239633530/fix.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec194115221" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">How to set it up: </span><br /><br />Add an ME301 block to the page and apply the following settings:<br /><br /><span style="font-weight: 400;">Main settings → Menu position behavior:</span> Fixed on scroll.<br /><span style="font-weight: 400;">Menu background → Menu background color. P</span>ick a color.<br /><span style="font-weight: 400;">Menu background → Menu background opacity:</span> 0%.<br /><span style="font-weight: 400;">Menu background → Menu background opacity on scroll: </span>80%.</div> </div> </div> </div> </div> <div id="rec212357656" class="r t-rec t-rec_pt_90 t-rec_pb_90" style="padding-top:90px;padding-bottom:90px; " data-animationappear="off" data-record-type="670">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left t-slds__arrow-withbg" aria-controls="carousel_212357656" aria-disabled="false" aria-label="Предыдущий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right t-slds__arrow-withbg" aria-controls="carousel_212357656" aria-disabled="false" aria-label="Следующий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_12 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_212357656" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 из 2"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3435-3339-4563-a566-333333363562/position.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3435-3339-4563-a566-333333363562/-/empty/position.png" data-original="https://static.tildacdn.com/tild3435-3339-4563-a566-333333363562/position.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 из 2"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6231-6161-4239-b966-623161313832/other.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild6231-6161-4239-b966-623161313832/-/empty/other.png" data-original="https://static.tildacdn.com/tild6231-6161-4239-b966-623161313832/other.png" alt=""> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 1" style="background-color: #c7c7c7;" aria-current="true"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 2" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('212357656',false);});});</script> <style>#rec212357656 .t-slds__bullet_active .t-slds__bullet_body{background-color:#222 !important;}#rec212357656 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#222 !important;}</style> </div> <div id="rec194115223" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="37">  <div class="t022 t-align_center"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 t-prefix_3"> <div class="t022__text t-text t-text_sm" field="text"><a href="/design-menu/fixed-menu" target="_blank">Click here</a> to view an example of a fixed menu on the website</div> </div> </div> </div> </div> </div> <div id="rec212677192" class="r t-rec" style=" " data-record-type="215"> <a name="appearsonscroll" style="font-size:0;"></a> </div> <div id="rec194115224" class="r t-rec t-rec_pt_165 t-rec_pb_75" style="padding-top:165px;padding-bottom:75px; " data-record-type="255">  <div class="t225"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t225__uptitle t-uptitle t-uptitle_sm" field="subtitle"><div style="color:rgba(0,0,0,0.3);" data-customstyle="yes">MENU DESIGN OPTIONS</div></div> <div class="t225__title t-title t-title_md" field="title">Menu Fixed on Top of the Page,<br />Menu That Appears on Scroll</div> </div> </div> </div> <style> #rec194115224 .t225__uptitle{text-transform:uppercase;}</style> </div> <div id="rec194115225" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">What it looks like: </span><br />This menu is similar to the one described above. What makes it different is another menu appearing on scroll and featuring even more items. For example, the top navigation menu contains a logo, a few menu items leading to different website pages, and some social media links. When the user scrolls the page, another menu bar appears, featuring a logo, a call to action, and a callback button. <span style="font-weight: 500;"><br /></span></div> </div> </div> </div> </div> <div id="rec194115226" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3366-6162-4130-b438-333230333137/2menu.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3366-6162-4130-b438-333230333137/-/empty/2menu.gif" data-original="https://static.tildacdn.com/tild3366-6162-4130-b438-333230333137/2menu.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec194115227" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">How to set it up: </span><br />Add a ME301 block to the page and apply the following settings:<br /><br /><span style="font-weight: 400;">Menu One (located on top of the page)</span><br /><span style="font-weight: 300;">Main settings → Menu position behavior: Absolute.</span><br /><span style="font-weight: 300;">Menu background → Menu background opacity: 0%.</span><br /><br /><span style="font-weight: 400;">Menu Two (appearing on scroll)</span><br /><span style="font-weight: 300;">Main settings → Menu position behavior: Fixed on scroll.</span><br /><span style="font-weight: 300;">Main settings → Reveal menu when the page is scrolled down in pixels: 600px.</span><br /><span style="font-weight: 300;">Menu background → Menu background color. Pick a color.</span><br /><span style="font-weight: 300;">Menu background → Menu background opacity: 70%.</span></div> </div> </div> </div> </div> <div id="rec361834767" class="r t-rec t-rec_pt_90 t-rec_pb_90" style="padding-top:90px;padding-bottom:90px; " data-animationappear="off" data-record-type="670">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left t-slds__arrow-withbg" aria-controls="carousel_361834767" aria-disabled="false" aria-label="Предыдущий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right t-slds__arrow-withbg" aria-controls="carousel_361834767" aria-disabled="false" aria-label="Следующий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_12 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_361834767" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 из 4"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3665-3366-4165-a136-383738653234/1.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3665-3366-4165-a136-383738653234/-/empty/1.png" data-original="https://static.tildacdn.com/tild3665-3366-4165-a136-383738653234/1.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 из 4"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3933-3364-4364-b362-393362393336/2.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3933-3364-4364-b362-393362393336/-/empty/2.png" data-original="https://static.tildacdn.com/tild3933-3364-4364-b362-393362393336/2.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="3" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="3 из 4"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6139-6161-4164-a531-316466383938/3.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild6139-6161-4164-a531-316466383938/-/empty/3.png" data-original="https://static.tildacdn.com/tild6139-6161-4164-a531-316466383938/3.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="4" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="4 из 4"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3764-3638-4039-b638-653932356531/4.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3764-3638-4039-b638-653932356531/-/empty/4.png" data-original="https://static.tildacdn.com/tild3764-3638-4039-b638-653932356531/4.png" alt=""> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 1" style="background-color: #c7c7c7;" aria-current="true"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 2" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="3"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 3" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="4"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 4" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> <div class="t-slds__caption t-col t-col_8 t-prefix_2 t-slds__caption-active" data-slide-caption="1"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__descr t-descr t-descr_xxs" data-redactor-notoolbar="yes" field="gi_descr__0">Menu One</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="2"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__descr t-descr t-descr_xxs" data-redactor-notoolbar="yes" field="gi_descr__1">Menu One</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="3"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__descr t-descr t-descr_xxs" data-redactor-notoolbar="yes" field="gi_descr__2">Menu Two</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="4"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__descr t-descr t-descr_xxs" data-redactor-notoolbar="yes" field="gi_descr__3">Menu Two</div> </div> </div> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('361834767',false);});});</script> <style>#rec361834767 .t-slds__bullet_active .t-slds__bullet_body{background-color:#222 !important;}#rec361834767 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#222 !important;}</style> </div> <div id="rec194115229" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="37">  <div class="t022 t-align_center"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 t-prefix_3"> <div class="t022__text t-text t-text_sm" field="text"><a href="/design-menu/two-menu" target="_blank" rel="noreferrer noopener">Click here</a> to view the examples of these menus on a website</div> </div> </div> </div> </div> </div> <div id="rec212677230" class="r t-rec" style=" " data-record-type="215"> <a name="hamburger" style="font-size:0;"></a> </div> <div id="rec194115230" class="r t-rec t-rec_pt_165 t-rec_pb_75" style="padding-top:165px;padding-bottom:75px; " data-record-type="255">  <div class="t225"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t225__uptitle t-uptitle t-uptitle_sm" field="subtitle"><div style="color:rgba(0,0,0,0.3);" data-customstyle="yes">MENU DESIGN OPTIONS</div></div> <div class="t225__title t-title t-title_md" field="title">Hamburger Menu</div> </div> </div> </div> <style> #rec194115230 .t225__uptitle{text-transform:uppercase;}</style> </div> <div id="rec194115231" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">What it looks like: </span><br />The hamburger menu is the three horizontal lines at the top of the screen. When the user clicks it, it opens to reveal a navigation menu.<br /><br /><span style="font-weight: 500;">What you can use it for:</span><br /><span style="font-weight: 400;">Such a menu is perfect for your website if you want the visitors to focus on the content without being distracted by other design elements. The hamburger menu is usually used in a mobile version of the website. You can set up how the menu appears on different devices. </span><br /><br /><span style="font-weight: 400;">For example, you may opt for a regular menu to appear only on the desktop version of your website and make the hamburger menu visible solely on mobile devices.</span><span style="font-weight: 300;"> </span></div> </div> </div> </div> </div> <div id="rec194115232" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <a class="t374__link" href="http://help.tilda.cc/mobile-version" target="_blank"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title">How to Optimize a Website for Viewing on Mobile Devices</div> </div> </div> </a> </div> </div> </div> </div> <div id="rec194115233" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3334-6136-4130-b734-326663343162/burger.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3334-6136-4130-b734-326663343162/-/empty/burger.gif" data-original="https://static.tildacdn.com/tild3334-6136-4130-b734-326663343162/burger.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec194115234" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">How to set it up: </span><br />Add a ME401/402/403/404/405 block to the page, set up the menu position behavior, the menu icon color, and the menu item text color. <br /><br />For example, you may apply the following settings:<br /><span style="font-weight: 400;">Main settings → Menu position behavior:</span> Fixed on scroll.<br /><span style="font-weight: 400;">Menu item → Color. Pick</span> black.<br />Menu background → Collapsed menu background color. Make it transparent.<br />Menu background → <span style="font-weight: 400;">Expanded menu </span>background <span style="font-weight: 400;">color. Pick </span>white.</div> </div> </div> </div> </div> <div id="rec212382900" class="r t-rec t-rec_pt_90 t-rec_pb_90" style="padding-top:90px;padding-bottom:90px; " data-animationappear="off" data-record-type="670">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left t-slds__arrow-withbg" aria-controls="carousel_212382900" aria-disabled="false" aria-label="Предыдущий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right t-slds__arrow-withbg" aria-controls="carousel_212382900" aria-disabled="false" aria-label="Следующий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_12 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_212382900" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 из 3"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3638-3238-4637-b561-303331663839/1.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3638-3238-4637-b561-303331663839/-/empty/1.png" data-original="https://static.tildacdn.com/tild3638-3238-4637-b561-303331663839/1.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 из 3"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6438-3434-4030-b136-613639386363/2.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild6438-3434-4030-b136-613639386363/-/empty/2.png" data-original="https://static.tildacdn.com/tild6438-3434-4030-b136-613639386363/2.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="3" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="3 из 3"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6264-6562-4736-b335-653162303837/3.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild6264-6562-4736-b335-653162303837/-/empty/3.png" data-original="https://static.tildacdn.com/tild6264-6562-4736-b335-653162303837/3.png" alt=""> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 1" style="background-color: #c7c7c7;" aria-current="true"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 2" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="3"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 3" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('212382900',false);});});</script> <style>#rec212382900 .t-slds__bullet_active .t-slds__bullet_body{background-color:#222 !important;}#rec212382900 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#222 !important;}</style> </div> <div id="rec194115236" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="37">  <div class="t022 t-align_center"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 t-prefix_3"> <div class="t022__text t-text t-text_sm" field="text"><a href="/design-menu/hamburger-menu" target="_blank">Click here</a> to view an example of a hamburger menu on the website</div> </div> </div> </div> </div> </div> <div id="rec212677264" class="r t-rec" style=" " data-record-type="215"> <a name="multilevel" style="font-size:0;"></a> </div> <div id="rec194115237" class="r t-rec t-rec_pt_165 t-rec_pb_75" style="padding-top:165px;padding-bottom:75px; " data-record-type="255">  <div class="t225"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t225__uptitle t-uptitle t-uptitle_sm" field="subtitle"><div style="color:rgba(0,0,0,0.3);" data-customstyle="yes">MENU DESIGN OPTIONS</div></div> <div class="t225__title t-title t-title_md" field="title">Multilevel Menu</div> </div> </div> </div> <style> #rec194115237 .t225__uptitle{text-transform:uppercase;}</style> </div> <div id="rec194115238" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">What it looks like: </span><br /><span style="font-weight: 400;">A drop-down menu appears when you click a menu item.</span><br /><br /><span style="font-weight: 500;">What you can use it for:</span><br /><span style="font-weight: 400;">Large websites with an advanced structure.</span></div> </div> </div> </div> </div> <div id="rec194115239" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6665-3236-4233-a635-393332393465/2level.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild6665-3236-4233-a635-393332393465/-/empty/2level.gif" data-original="https://static.tildacdn.com/tild6665-3236-4233-a635-393332393465/2level.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec194115240" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">How to set it up: </span><br />Add the ME301 block to the page, set up a menu similar to the one described above, then add Subitems in the Content panel of the block.<br /><br /><span style="font-weight: 400;">1. Open the Content panel of the block → Menu items → Add subitems.</span><br />2. Click the plus icon next to an item, enter a subitem title, and assign a link. Repeat until all necessary subitems are added.<br /><span style="font-weight: 400;">3. Open the Settings panel of the block → Submenu Settings. Select the "Display second level menu icon" checkbox.</span><br /><br />Please note that the main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.</div> </div> </div> </div> </div> <div id="rec362916153" class="r t-rec t-rec_pt_90 t-rec_pb_90" style="padding-top:90px;padding-bottom:90px; " data-animationappear="off" data-record-type="670">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left t-slds__arrow-withbg" aria-controls="carousel_362916153" aria-disabled="false" aria-label="Предыдущий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right t-slds__arrow-withbg" aria-controls="carousel_362916153" aria-disabled="false" aria-label="Следующий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_12 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_362916153" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 из 4"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3863-3934-4135-a463-626165386330/1.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3863-3934-4135-a463-626165386330/-/empty/1.png" data-original="https://static.tildacdn.com/tild3863-3934-4135-a463-626165386330/1.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 из 4"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3931-3161-4764-b965-353431616136/2.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3931-3161-4764-b965-353431616136/-/empty/2.png" data-original="https://static.tildacdn.com/tild3931-3161-4764-b965-353431616136/2.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="3" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="3 из 4"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3138-3237-4163-b933-633932396533/3.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3138-3237-4163-b933-633932396533/-/empty/3.png" data-original="https://static.tildacdn.com/tild3138-3237-4163-b933-633932396533/3.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="4" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="4 из 4"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3161-6631-4132-b864-646230643132/4.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3161-6631-4132-b864-646230643132/-/empty/4.png" data-original="https://static.tildacdn.com/tild3161-6631-4132-b864-646230643132/4.png" alt=""> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 1" style="background-color: #c7c7c7;" aria-current="true"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 2" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="3"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 3" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="4"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 4" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('362916153',false);});});</script> <style>#rec362916153 .t-slds__bullet_active .t-slds__bullet_body{background-color:#222 !important;}#rec362916153 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#222 !important;}</style> </div> <div id="rec194115242" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="37">  <div class="t022 t-align_center"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 t-prefix_3"> <div class="t022__text t-text t-text_sm" field="text"><a href="/design-menu/2-level-menu" target="_blank">Click here</a> to view an example of a multilevel menu on the website</div> </div> </div> </div> </div> </div> <div id="rec212677296" class="r t-rec" style=" " data-record-type="215"> <a name="tabs" style="font-size:0;"></a> </div> <div id="rec194115243" class="r t-rec t-rec_pt_165 t-rec_pb_75" style="padding-top:165px;padding-bottom:75px; " data-record-type="255">  <div class="t225"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t225__uptitle t-uptitle t-uptitle_sm" field="subtitle"><div style="color: rgba(0, 0, 0, 0.3);" data-customstyle="yes">MENU DESIGN OPTIONS</div></div> <div class="t225__title t-title t-title_md" field="title">Tabs<br /></div> </div> </div> </div> <style> #rec194115243 .t225__uptitle{text-transform:uppercase;}</style> </div> <div id="rec194115244" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">What it looks like: </span><br />An active tab allows users to browse content linked to it without leaving the web page.<br /><br /><span style="font-weight: 500;">What you can use it for:</span><br /><span style="font-weight: 500;"></span><span style="font-weight: 300;">Tabs allow you to show several categories of the same type of content such as different categories of works within a portfolio.</span></div> </div> </div> </div> </div> <div id="rec194115245" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3038-6465-4361-a266-623834313935/tabs.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3038-6465-4361-a266-623834313935/-/empty/tabs.gif" data-original="https://static.tildacdn.com/tild3038-6465-4361-a266-623834313935/tabs.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec194115246" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">How to set it up: </span><br />Add a ME602 or ME603 block to the page. You can use these blocks to create tabs and show content when the user clicks a tab within the same page. Below, you need to add blocks in a sequence that will change when the user clicks a particular tab.<br /><br /><span style="font-weight: 500;">How it works:</span><br />1. Add tab titles in the Content panel of the ME602 or ME603 block.<br />2. Add the blocks' IDs that should be visible when you click the tab (separate them with a comma, no space).<br /><br />Note: You can copy the block's ID in the Settings panel of the block—scroll down to the bottom of the panel to find it.</div> </div> </div> </div> </div> <div id="rec362919785" class="r t-rec t-rec_pt_90 t-rec_pb_45" style="padding-top:90px;padding-bottom:45px; " data-animationappear="off" data-record-type="670">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left t-slds__arrow-withbg" aria-controls="carousel_362919785" aria-disabled="false" aria-label="Предыдущий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right t-slds__arrow-withbg" aria-controls="carousel_362919785" aria-disabled="false" aria-label="Следующий слайд" style="width: 40px; height: 40px;background-color: rgba(232,232,232,1);"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 9px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 9.3 17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 8.5,8.5 0.5,16.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_12 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_362919785" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 из 2"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6361-6132-4861-b139-393739616330/1_1.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild6361-6132-4861-b139-393739616330/-/empty/1_1.png" data-original="https://static.tildacdn.com/tild6361-6132-4861-b139-393739616330/1_1.png" alt=""> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 из 2"> <div class="t-width t-width_12 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3864-3764-4764-a539-613732376331/2_1.png"> <img class="t-slds__img t-img" src="https://thb.tildacdn.com/tild3864-3764-4764-a539-613732376331/-/empty/2_1.png" data-original="https://static.tildacdn.com/tild3864-3764-4764-a539-613732376331/2_1.png" alt=""> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 1" style="background-color: #c7c7c7;" aria-current="true"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Перейти к слайду 2" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('362919785',false);});});</script> <style>#rec362919785 .t-slds__bullet_active .t-slds__bullet_body{background-color:#222 !important;}#rec362919785 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#222 !important;}</style> </div> <div id="rec194115248" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="37">  <div class="t022 t-align_center"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 t-prefix_3"> <div class="t022__text t-text t-text_sm" field="text"><a href="/design-menu/tabs" target="_blank" rel="noreferrer noopener">Click here</a> to view an example of this menu on the website</div> </div> </div> </div> </div> </div> <div id="rec530397628" class="r t-rec" style=" " data-record-type="215"> <a name="cart-search-fav" style="font-size:0;"></a> </div> <div id="rec530398780" class="r t-rec t-rec_pt_165 t-rec_pb_75" style="padding-top:165px;padding-bottom:75px; " data-record-type="255">  <div class="t225"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t225__uptitle t-uptitle t-uptitle_sm" field="subtitle"><div style="color: rgba(0, 0, 0, 0.3);" data-customstyle="yes">MENU DESIGN OPTIONS</div></div> <div class="t225__title t-title t-title_md" field="title">Menu With Cart, Search, And Favorites</div> </div> </div> </div> <style> #rec530398780 .t225__uptitle{text-transform:uppercase;}</style> </div> <div id="rec530397630" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">What it looks like:</span><br /><span style="font-weight: 400;">It displays items in the shopping cart, items added to favorites, and a search widget in the menu near the navigation section.</span><br /><br /><span style="font-weight: 500;">What you can use it for:</span><br /><span style="font-weight: 400;">The menu is helpful for the </span><a href="https://blog-en.tilda.cc/catalog" target="_blank" rel="noreferrer noopener" style="font-weight: 400;">Product Catalog</a><span style="font-weight: 400;"> users to display the shopping cart, website search widget, and Favorites concisely.</span></div> </div> </div> </div> </div> <div id="rec530397631" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3637-3663-4062-b166-616431383438/Screenshot_2022-07-0.png"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3637-3663-4062-b166-616431383438/-/empty/Screenshot_2022-07-0.png" data-original="https://static.tildacdn.com/tild3637-3663-4062-b166-616431383438/Screenshot_2022-07-0.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec530397633" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">How to set it up:</span><br />Add the ME401 block to the page → Content tab → Cart, Search, And Favorites → select the checkboxes to show the icons you need in the menu.<br /><br />Select the "Don't show native widget buttons" checkbox to display the icons only in the menu.</div> </div> </div> </div> </div> <div id="rec530397641" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3832-6161-4237-b536-623462613732/Screenshot_2022-12-2.png"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3832-6161-4237-b536-623462613732/-/empty/Screenshot_2022-12-2.png" data-original="https://static.tildacdn.com/tild3832-6161-4237-b536-623462613732/Screenshot_2022-12-2.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec530397642" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Then add the shopping cart block ST100, the search widget block T985, and the Favorites block ST110 and publish the page.</div> </div> </div> </div> </div> <div id="rec530397643" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3433-3736-4465-a563-653932616530/Screenshot_2022-12-2.png"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3433-3736-4465-a563-653932616530/-/empty/Screenshot_2022-12-2.png" data-original="https://static.tildacdn.com/tild3433-3736-4465-a563-653932616530/Screenshot_2022-12-2.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec530397644" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Done.<br /><br />This feature works for all menu blocks numbered ME4XX.</div> </div> </div> </div> </div> <div id="rec530397645" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="37">  <div class="t022 t-align_center"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 t-prefix_3"> <div class="t022__text t-text t-text_sm" field="text"><a href="https://help.tilda.cc/design-menu/cart-search-fav" target="_blank" rel="noreferrer noopener">Click here</a> to view an example of this menu on the website</div> </div> </div> </div> </div> </div> <div id="rec530397646" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 500;">Display options:</span><br />If you want to show both icons and the Favorites widget button in the menu, uncheck the "Don't show native widget buttons" in the ME401 block's Content tab.</div> </div> </div> </div> </div> <div id="rec530397648" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3463-3462-4361-b062-643863363765/Screenshot_2022-12-2.png"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3463-3462-4361-b062-643863363765/-/empty/Screenshot_2022-12-2.png" data-original="https://static.tildacdn.com/tild3463-3462-4361-b062-643863363765/Screenshot_2022-12-2.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec530397649" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can hide the widget icon for the blocks ST100 Shopping cart and T985 Search—in the "More settings" tab in the block Settings, select the "Don't show widget button" checkbox. Publish the page.</div> </div> </div> </div> </div> <div id="rec530397650" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3463-3430-4539-b339-316632343338/Screenshot_2022-12-2.png"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3463-3430-4539-b339-316632343338/-/empty/Screenshot_2022-12-2.png" data-original="https://static.tildacdn.com/tild3463-3430-4539-b339-316632343338/Screenshot_2022-12-2.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec530397651" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Done! Three icons are displayed in the menu and there is a separate widget for Favorites. You can configure visibility for the shopping cart or search widget similarly.</div> </div> </div> </div> </div> <div id="rec530397652" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3336-3632-4038-a536-643132616361/Screenshot_2022-07-1.png"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3336-3632-4038-a536-643132616361/-/empty/Screenshot_2022-07-1.png" data-original="https://static.tildacdn.com/tild3336-3632-4038-a536-643132616361/Screenshot_2022-07-1.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec530403134" class="r t-rec t-rec_pt_75 t-rec_pb_75" style="padding-top:75px;padding-bottom:75px; " data-record-type="37">  <div class="t022 t-align_center"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 t-prefix_3"> <div class="t022__text t-text t-text_sm" field="text"><a href="https://help.tilda.cc/design-menu/cart-search-fav" target="_blank" rel="noreferrer noopener">Click here</a> to view an example of this menu on the website</div> </div> </div> </div> </div> </div> <div id="rec194115249" class="r t-rec t-rec_pt_60 t-rec_pb_150" style="padding-top:60px;padding-bottom:150px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Here are some key menu design options. If you have new ideas and want to share them, please email the link to your website to <a href="mailto:team@tilda.cc">team@tilda.cc</a> with the "Menu design" in the subject line. Thank you!<br /><br />Best of luck with your design experiments!</div> </div> </div> </div> </div> <div id="rec194115250" class="r t-rec t-rec_pt_0 t-rec_pb_120" style="padding-top:0px;padding-bottom:120px; " data-record-type="151"> <div class="t-container_100 t014" style=""> <div style="position: relative; right: 50%; float: right;"> <div style="position: relative; z-index: 1; right: -50%;" class="t014__circle-xl "> <script type="text/javascript" src="https://static.tildacdn.com/js/ya-share.js" charset="utf-8" async="async"></script> <div class="ya-share2" data-access-token:facebook="" data-yashareL10n="en" data-services="facebook,twitter" data-counter=""></div> </div> </div> </div> </div> <div id="rec194115251" class="r t-rec t-rec_pt_135 t-rec_pb_60" style="padding-top:135px;padding-bottom:60px;background-color:#ffa282; " data-animationappear="off" data-record-type="33" data-bg-color="#ffa282">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title"><span style="font-weight: 300;">The website you've been dreaming of, starts right here</span></div> </div> </div> </div> </div> <div id="rec194115252" class="r t-rec t-rec_pt_0 t-rec_pb_120" style="padding-top:0px;padding-bottom:120px;background-color:#ffa282; " data-animationappear="off" data-record-type="191" data-bg-color="#ffa282">  <div class="t142"> <div class="t-container_100"> <div class="t142__wrapone"> <div class="t142__wraptwo"> <a class="t-btn t142__submit t-btn_md" href="https://tilda.cc/registration/" target="" style="color:#000000;border:2px solid #000000;border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px;" data-buttonfieldset="button"> <span class="t142__text">Create your website</span> </a> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t142_checkSize',function() {t142_checkSize('194115252');});});window.addEventListener('load',function() {t_onFuncLoad('t142_checkSize',function() {t142_checkSize('194115252');});});</script> </div> </div>  <div class="t-tildalabel " id="tildacopy" data-tilda-sign="6518#11528849"><a href="https://tilda.cc/" class="t-tildalabel__link"><div class="t-tildalabel__wrapper"><div class="t-tildalabel__txtleft">Made on </div><div class="t-tildalabel__wrapimg"><img src="https://static.tildacdn.com/img/tildacopy.png" class="t-tildalabel__img" fetchpriority="low" alt=""></div><div class="t-tildalabel__txtright">Tilda</div></div></a></div>  <script type="text/javascript">if(!window.mainTracker) {window.mainTracker='tilda';} window.tildastatcookie='no';window.tildastatscroll='yes';setTimeout(function(){(function(d,w,k,o,g) {var n=d.getElementsByTagName(o)[0],s=d.createElement(o),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.key=k;s.id="tildastatscript";s.src=g;if(w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded",f,false);} else {f();}})(document,window,'914414f8f763e0b0e2bd67efc7504302','script','https://static.tildacdn.com/js/tilda-stat-1.0.min.js');},2000);</script> </body> </html>