Adding a mobile menu to Blogger Template Fletro Pro and iMagz Like Median UI
First, let's say that this mobile menu will only work on all Jago Design templates. Let me use the latest version of the themes. Examples: Fletro Pro v6.1, iMagz 1.25, Medium Ui v1.6
To use the mobile menu, we need to follow three steps. The steps are CSS and HTML.
You can do this even if you don't know about coding. Because we have tried to present the whole here simply. If you have any problem, you can contact our Telegram group.
First, we need to login to blogger.com. Then go to Themes and click on Edit HTML.
Copy the following CSS and place it in the Style Sheet.
/* Mobile Menu */ .mobMn{position:fixed;left:0;right:0;bottom:0; border-top:1px solid var(--mobL);border-radius:var(--mobBr) var(--mobBr) 0 0;background:var(--mobB);color:var(--mobT);padding:0 20px;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);z-index:2;font-size:12px} .mobMn svg.line{stroke:var(--mobT);opacity:.8} .mobMn ul{height:55px;display:flex;align-items:center;justify-content:center;list-style:none;margin:0;padding:0} .mobMn li{display:flex;justify-content:center;flex:1 0 20%} .mobMn li >*{display:inline-flex;align-items:center;justify-content:center;min-width:35px;height:35px;border-radius:20px;padding:0 8px;transition:var(--trans-1);color:inherit} .mobMn li svg{margin:0 3px;flex-shrink:0} .mobMn li >*::after{content:attr(data-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:0;margin:0;transition:inherit;opacity:.7} .mobMn li >*:hover::after{max-width:70px;margin:0 3px} .mobMn .nmH{opacity:.7} .mobMn li >*:hover{background:var(--mobHv)} .mobMn li >*:hover svg.line{fill:var(--mobT) !important;opacity:.5} .mobMn li >*:hover svg.line .svgC{fill:var(--linkB) !important;stroke:var(--linkB)} /* Style 2 */ .MN-2 .mobMn{font-size:10px} .mobS .mobMn li >*{flex-direction:column;position:relative} .mobS .mobMn li >*:hover{background:transparent} .MN-2 .mobMn li >*::after{max-width:none} /* Style 3 */ .MN-3 .mobMn li >*::after, .MN-4 .mobMn li >*::after{content:'';width:4px;height:4px;border-radius:50%;position:absolute;bottom:-2px;opacity:0} .MN-3 .mobMn li >*:hover::after, .MN-4 .mobMn li >*:hover::after{background:var(--linkB);opacity:.7} .MN-3 .mobMn li >*:hover svg.line, .MN-4 .mobMn li >*:hover svg.line{stroke:var(--linkB);fill:var(--linkB) !important;opacity:.7} /* Style 4 */ .MN-4 .mobMn{left:15px;right:15px;bottom:15px;padding:0 10px;border-radius:var(--headerR);box-shadow: 0 5px 35px rgba(0,0,0,.1);transition:bottom 1.2s ease;-webkit-transition:bottom 1.2s ease} .MN-4 .mobMn.slide{bottom:-150px;transition:bottom 1.5s ease;-webkit-transition:bottom 1.5s ease}
/* Dark Mode */ .drK .mobMn { background: var(--darkBs); color: white;}
/* Responsive */ @media screen and (min-width:897px){/* Mobile menu */.mnMob{position:fixed;width:var(--navW)} .mnH, .mobMn{display:none}/* Header */ .headL .headN{width:100%} .headL, .headR{z-index:1} .headM .HTML + .PageList, .headL .headIc{display:none} .headM{display:flex;align-items:center;justify-content:center;max-width:calc(100% - 350px);height:100%;position:absolute;left:0;right:0;margin:0 auto}
There are a few styles in the mobile menu; to change these styles, an HTML code must be activated, and the code must be placed under the body tag. Which is as follows:
<!--[ Enable tag below to change Mobile Menu style, try 'MN-2', 'MN-3' or 'MN-4' ]-->
<b:class name='MN-3 mobS'/>
In the third step, we will activate the mobile menu. Copy the HTML code below and paste it above the footer section.
<!--[ Mobile Menu ]-->
<b:section class='mobMn' id='mobile-menu' maxwidgets='1' showaddelement='false'>
<b:widget id='TextList99' locked='true' title='Mobile Menu' type='TextList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='shownum'>7</b:widget-setting>
<b:widget-setting name='item-6'>Comments</b:widget-setting>
<b:widget-setting name='item-5'>Share</b:widget-setting>
<b:widget-setting name='item-4'>Top</b:widget-setting>
<b:widget-setting name='item-3'>Dark</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='item-2'>Menu</b:widget-setting>
<b:widget-setting name='item-1'>Search</b:widget-setting>
<b:widget-setting name='item-0'>Home</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul>
<b:loop index='m' values='data:items' var='item'>
<b:if cond='data:m <= 6'>
<b:if cond='data:item == "Home"'>
<li class='mH'>
<b:class cond='data:view.isHomepage' name='nmH'/>
<b:tag class='dznM' expr:aria-label='data:item' expr:data-text='data:item' expr:name='data:view.url == data:blog.homepageUrl ? "span" : "a"' role='button'>
<b:attr cond='data:view.url != data:blog.homepageUrl' expr:value='data:blog.homepageUrl.canonical' name='href'/>
<b:attr cond='data:view.url != data:blog.homepageUrl' name='role' value='button'/>
<b:include name='home-icon'/>
</b:tag>
</li>
<b:elseif cond='data:item == "Search"'/>
<li class='mS'>
<label class='dznM' expr:data-text='data:item' for='offSrh'><b:include name='search-icon'/></label>
</li>
<b:elseif cond='data:item == "Menu"'/>
<li class='mN'>
<label class='dznM' expr:aria-label='data:item' expr:data-text='data:item' for='offNav'><b:include name='menu-icon'/></label>
</li>
<b:elseif cond='data:item == "Dark"'/>
<b:if cond='!data:view.isPost'>
<li class='mD'>
<span aria-label='Mode' class='tDL dznM' data-light='Light' expr:data-text='data:item' onclick='darkMode()' role='button'> <svg class='line' viewBox='0 0 24 24'>
<g class='d1'><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'/></g>
<g class='d2'><path class='f' d='M12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 15.5899 8.41015 18.5 12 18.5Z'/><path d='M19.14 19.14L19.01 19.01M19.01 4.99L19.14 4.86L19.01 4.99ZM4.86 19.14L4.99 19.01L4.86 19.14ZM12 2.08V2V2.08ZM12 22V21.92V22ZM2.08 12H2H2.08ZM22 12H21.92H22ZM4.99 4.99L4.86 4.86L4.99 4.99Z' stroke-width='2'/></g></svg></span>
</li>
</b:if>
<b:elseif cond='data:item == "Light"'/>
<b:if cond='!data:view.isPost'>
<li class='mL'>
<span aria-label='Mode' class='tDL dznM' data-light='Dark' expr:data-text='data:item' onclick='darkMode()' role='button'><b:include name='sun-moon-icon'/></span>
</li>
</b:if>
<b:elseif cond='data:item == "Top"'/>
<b:if cond='data:view.isHomepage'>
<li class='mS'>
<span class='dznM' expr:aria-label='data:item' expr:data-text='data:item' onclick='window.scrollTo({top: 0});' role='button'><svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 3.000000)'><path class='fill' d='M9.5,18 C3.00557739,18 0.456662548,17.5386801 0.0435259337,15.2033146 C-0.36961068,12.8679491 2.27382642,8.47741935 3.08841712,7.02846996 C5.81256986,2.18407813 7.66371927,0 9.5,0 C11.3362807,0 13.1874301,2.18407813 15.9115829,7.02846996 C16.7261736,8.47741935 19.3696107,12.8679491 18.9564741,15.2033146 C18.5443995,17.5386801 15.9944226,18 9.5,18 Z'/></g></svg></span>
</li>
</b:if>
<b:elseif cond='data:item == "Share"'/>
<b:if cond='data:view.isPost'>
<li class='mS'>
<label class='dznM' expr:aria-label='data:item' expr:data-text='data:item' for='forShare'><b:include name='share-alt-icon'/></label>
</li>
</b:if>
<b:elseif cond='data:item == "Comments"'/>
<b:if cond='data:view.isPost'>
<li class='mC'>
<label class='dznM' expr:aria-label='data:item' expr:data-text='data:item' for='forComments'><b:include name='messages-icon'/></label>
</li>
</b:if>
</b:if>
</b:if>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
We'll save the last one for completion. Then visit your website on a mobile device. At the end, you will see how successful your work is. If you like this tutorial, stay with us. And let me know what you think here. And don't forget to share with your friends!
Reference
https://www.jagodesain.com/