Home Blogging How to Install Responsive Mega Menu on Blogger

How to Install Responsive Mega Menu on Blogger

Mega Menu is a menu that displays a large dropdown menu and usually many links that yo that have a lot of content and type of pages so that it requires a lot of navigation, such as government sites or news sites.

On this occasion Namina will give a tutorial on How to Install Responsive Mega Menu on Blogger . Please follow the steps below.

How to Install Responsive Mega Menu on Blogger

Here I will give you several mega menu choices that are already equipped with search features, then just adjust to your needs.

Please note, the code I will share requires the Fontwesome icon. So add Fontwesome in the template if it doesn’t already exist.
Open the Blogger page > Click the Themes menu and click the Edit HTML button > Add the code below before</body>

<div class='megamenu-container'>
   <div class='megamenu'>
      <ul>
         <li><a href='/'>Home</a></li>
         <li>
            <a href='#'>About</a>
            <ul>
               <li>
                  <a href='#'>School</a>
                  <ul>
                     <li><a href='#'>Leadership</a></li>
                     <li><a href='#'>History</a></li>
                     <li><a href='#'>Locations</a></li>
                     <li><a href='#'>Careers</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Study</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Research</a>
                  <ul>
                     <li><a href='#'>Undergraduate research</a></li>
                     <li><a href='#'>Masters research</a></li>
                     <li><a href='#'>Funding</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Something</a>
                  <ul>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                  </ul>
               </li>
            </ul>
         </li>
         <li>
            <a href='#'>News</a>
            <ul>
               <li><a href='#'>Today</a></li>
               <li><a href='#'>Calendar</a></li>
               <li><a href='#'>Sport</a></li>
            </ul>
         </li>
         <li>
            <a href='#'>Contact</a>
            <ul>
               <li>
                  <a href='#'>School</a>
                  <ul>
                     <li><a href='#'>Lidership</a></li>
                     <li><a href='#'>History</a></li>
                     <li><a href='#'>Locations</a></li>
                     <li><a href='#'>Careers</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Study</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Study</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Another sub</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
      <span class='containersearch'>
         <form action='/search' id='search-form' method='get'>
            <input class='inputnui' name='q' placeholder='Search here...' type='search' value=''/>
            <i aria-hidden='true' class='fa fa-search'/>
         </form>
      </span>
   </div>
</div>
<script type='text/javascript'>
//<![CDATA[
// JS Megamenu by naminakiky.com
$(document).ready(function(){"use strict";$(".megamenu > ul > li:has( > ul)").addClass("megamenu-dropdown-icon"),$(".megamenu > ul > li > ul:not(:has(ul))").addClass("normal-sub"),$(".megamenu > ul").before('<a href="#" class="megamenu-mobile"></a>'),$(".megamenu > ul > li").hover(function(e){$(window).width()>943&&($(this).children("ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),$(".megamenu > ul > li").click(function(){$(window).width()<=943&&$(this).children("ul").fadeToggle(150)}),$(".megamenu-mobile").click(function(e){$(".megamenu > ul").toggleClass("show-on-mobile"),e.preventDefault()})});
$(document).ready(function(){$(".fa-search").click(function(){$(".containersearch, .inputnui").toggleClass("active"),$("input[type='text']").focus()})});
//]]>
</script>

Choose jQuery if using version 2 or version 3

<script type='text/javascript'>
//<![CDATA[
// JS Megamenu by naminakiky.com
$(document).ready(function(){"use strict";$(".megamenu > ul > li:has( > ul)").addClass("megamenu-dropdown-icon"),$(".megamenu > ul > li > ul:not(:has(ul))").addClass("normal-sub"),$(".megamenu > ul").before('<a href="#" class="megamenu-mobile"></a>'),$(".megamenu > ul > li").hover(function(e){$(window).width()>943&&($(this).children("ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),$(".megamenu > ul > li").click(function(){$(window).width()<=943&&$(this).children("ul").fadeToggle(150)}),$(".megamenu-mobile").click(function(e){$(".megamenu > ul").toggleClass("show-on-mobile"),e.preventDefault()})});
$(document).ready(function(){$(".fa-search").click(function(){$(".containersearch, .inputnui").toggleClass("active"),$("input[type='text']").focus()})});var prev=0,$window=$(window),nav=$(".megamenu-container");$window.on("scroll",function(){var n=$window.scrollTop();nav.toggleClass("hiddenmega",n>prev),prev=n});
//]]>
</script>

Then select one of the CSS below and add the code before </head>

Mega Menu Version 1

This is the standard version of Responsive Mega Menu

<style type='text/css'>
/* Responsive megamenu by naminakiky.com */
.megamenu{position:relative;display:block;margin:auto;text-align:center;max-width:970px}
.megamenu-container{margin:0 auto;background:#222;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;top:0;left:0;right:0;z-index:99}
.megamenu-mobile{display:none;padding:24px 20px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.megamenu-mobile:before{content:"\f0c9";font-family:"fontawesome";font-size:1.5rem;padding:0;left:20px;position:absolute;top:15px;transform:translateY(-25%);color:#222}
.megamenu-dropdown-icon:before{content:"\f107";font-family:"fontawesome";display:none;cursor:pointer;color:#fff;position:absolute;right:20px;top:15px}
.megamenu > ul{margin:0 auto;width:100%;list-style:none;padding:0;position:relative;box-sizing:border-box}
.megamenu > ul:before,.megamenu > ul:after{content:"";display:table}
.megamenu > ul:after{clear:both}
.megamenu > ul > li{float:left;padding:0;margin:0;text-decoration:none;transition:all .1s}
.megamenu > ul > li a{cursor:pointer;text-decoration:none;padding:15px 20px;display:block;color:#fff;font-size:14px;transition:all .1s}
.megamenu > ul > li:hover{background:#e84118}
.megamenu > ul > li > ul{display:none;width:100%;background:#fff;padding:20px;position:absolute;z-index:99;left:0;margin:0;list-style:none;text-align:left;box-sizing:border-box;box-shadow:0 8px 10px -4px rgba(0,0,0,0.2)}
.megamenu > ul > li > ul:before,.megamenu > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li{margin:0;padding-bottom:0;list-style:none;width:25%;background:none;float:left}
.megamenu > ul > li > ul > li a{color:#222;padding:0.2em 0;width:95%;display:block;border-bottom:1px solid rgba(0,0,0,0.1)}
.megamenu > ul > li > ul > li a:hover{color:#e84118}
.megamenu > ul > li > ul > li > ul{display:block;padding:0;margin:10px 0 0;list-style:none;box-sizing:border-box}
.megamenu > ul > li > ul > li > ul:before,.megamenu > ul > li > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li > ul > li{float:left;width:100%;padding:10px 0;margin:0;font-size:0.8em}
.megamenu > ul > li > ul > li > ul > li a{border:0}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:170px;left:auto;padding:5px 10px}
.megamenu > ul > li > ul.normal-sub > li{width:100%}
.megamenu > ul > li > ul.normal-sub > li a{border:0;padding:.5em 0}
.containersearch{background:#e84118;width:0;position:absolute;top:0;right:0;padding:0 30px;text-align:center;transition:all 0.5s ease}
.containersearch .fa{background:#e84118;color:#fff;position:absolute;font-size:19px;cursor:pointer;padding:0;top:15px;right:20px}
.inputnui{border:0!important;background:transparent;width:0%;padding:17.5px 0!important;outline:none;color:#fff;font-size:15px!important;transition:all 0.3s ease}
.containersearch.active{width:250px;padding-left:25px;transition:all 0.5s ease}
.inputnui.active{width:98%;padding-left:5px!important;transition:all 0.5s 0.8s ease}
input::placeholder{color:#fff}
@media only screen and (max-width: 959px) {
.megamenu-container{width:100%}
.megamenu-mobile,.megamenu-dropdown-icon:before{display:block}
.megamenu > ul{display:none}
.megamenu > ul > li{position:relative;width:100%;float:none;display:inline-block;text-align:left;padding:0}
.megamenu > ul > li a{padding:15px 20px;display:block}
.megamenu > ul > li > ul{position:relative;overflow-y:scroll;max-height:280px}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:100%}
.megamenu > ul > li > ul > li{float:none;width:100%;margin-top:20px}
.megamenu > ul > li > ul > li:first-child{margin:0}
.megamenu > ul > li > ul > li > ul{position:relative}
.megamenu > ul > li > ul > li > ul > li{float:none}
.megamenu .show-on-mobile{display:block}
.megamenu > ul > li:hover{background:rgba(255,255,255,.1)}
.containersearch{background:transparent}
.containersearch .fa{background:transparent;color:#222}
.containersearch.active{width:100%;text-align:center}
.inputnui.active,input::placeholder{color:#888;text-align:center}}
</style>

Mega Menu Version 2 with Scroll Hide Function

This is version 2 of the Responsive Mega Menu with the hide hide function, so the menu will close if we scroll the page down and it will reappear if our page scrolls up.

<style type='text/css'>
/* Responsive megamenu by naminakiky.com */
.megamenu{position:relative;display:block;margin:auto;text-align:center;max-width:970px}
.megamenu-container{margin:0 auto;background:#222;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;top:0;left:0;right:0;z-index:99;transition:transform 1s cubic-bezier(0.86,0,0.07,1)}
.megamenu-mobile{display:none;padding:24px 20px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.megamenu-mobile:before{content:"\f0c9";font-family:"fontawesome";font-size:1.5rem;padding:0;left:20px;position:absolute;top:15px;transform:translateY(-25%);color:#222}
.megamenu-dropdown-icon:before{content:"\f107";font-family:"fontawesome";display:none;cursor:pointer;color:#fff;position:absolute;right:20px;top:15px}
.megamenu > ul{margin:0 auto;width:100%;list-style:none;padding:0;position:relative;box-sizing:border-box}
.megamenu > ul:before,.megamenu > ul:after{content:"";display:table}
.megamenu > ul:after{clear:both}
.megamenu > ul > li{float:left;padding:0;margin:0;text-decoration:none;transition:all .1s}
.megamenu > ul > li a{cursor:pointer;text-decoration:none;padding:15px 20px;display:block;color:#fff;font-size:14px;transition:all .1s}
.megamenu > ul > li:hover{background:#e84118}
.megamenu > ul > li > ul{display:none;width:100%;background:#fff;padding:20px;position:absolute;z-index:99;left:0;margin:0;list-style:none;text-align:left;box-sizing:border-box;box-shadow:0 8px 10px -4px rgba(0,0,0,0.2)}
.megamenu > ul > li > ul:before,.megamenu > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li{margin:0;padding-bottom:0;list-style:none;width:25%;background:none;float:left}
.megamenu > ul > li > ul > li a{color:#222;padding:0.2em 0;width:95%;display:block;border-bottom:1px solid rgba(0,0,0,0.1)}
.megamenu > ul > li > ul > li a:hover{color:#e84118}
.megamenu > ul > li > ul > li > ul{display:block;padding:0;margin:10px 0 0;list-style:none;box-sizing:border-box}
.megamenu > ul > li > ul > li > ul:before,.megamenu > ul > li > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li > ul > li{float:left;width:100%;padding:10px 0;margin:0;font-size:0.8em}
.megamenu > ul > li > ul > li > ul > li a{border:0}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:170px;left:auto;padding:5px 10px}
.megamenu > ul > li > ul.normal-sub > li{width:100%}
.megamenu > ul > li > ul.normal-sub > li a{border:0;padding:.5em 0}
.containersearch{background:#e84118;width:0;position:absolute;top:0;right:0;padding:0 30px;text-align:center;transition:all 0.5s ease}
.containersearch .fa{background:#e84118;color:#fff;position:absolute;font-size:19px;cursor:pointer;padding:0;top:15px;right:20px}
.inputnui{border:0!important;background:transparent;width:0%;padding:17.5px 0!important;outline:none;color:#fff;font-size:15px!important;transition:all 0.3s ease}
.containersearch.active{width:250px;padding-left:25px;transition:all 0.5s ease}
.inputnui.active{width:98%;padding-left:5px!important;transition:all 0.5s 0.8s ease}
input::placeholder{color:#fff}
.hiddenmega{transform:translateY(-80px)}
@media only screen and (max-width: 959px) {
.megamenu-container{width:100%}
.megamenu-mobile,.megamenu-dropdown-icon:before{display:block}
.megamenu > ul{display:none}
.megamenu > ul > li{position:relative;width:100%;float:none;display:inline-block;text-align:left;padding:0}
.megamenu > ul > li a{padding:15px 20px;display:block}
.megamenu > ul > li > ul{position:relative;overflow-y:scroll;max-height:280px}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:100%}
.megamenu > ul > li > ul > li{float:none;width:100%;margin-top:20px}
.megamenu > ul > li > ul > li:first-child{margin:0}
.megamenu > ul > li > ul > li > ul{position:relative}
.megamenu > ul > li > ul > li > ul > li{float:none}
.megamenu .show-on-mobile{display:block}
.megamenu > ul > li:hover{background:rgba(255,255,255,.1)}
.containersearch{background:transparent}
.containersearch .fa{background:transparent;color:#222}
.containersearch.active{width:100%;text-align:center}
.inputnui.active,input::placeholder{color:#888;text-align:center}}
</style>

Mega Menu Version 3 with Scroll Hide Bottom Function

This is version 3 of the Responsive Mega Menu with hide hide scroll function, has the same function as version 2 only the menu position is below.

<style type='text/css'>
/* Responsive megamenu by naminakiky.com */
.megamenu{position:relative;display:block;margin:auto;text-align:center;max-width:970px}
.megamenu-container{margin:0 auto;background:#222;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;bottom:0;left:0;right:0;z-index:99;transition:transform 1s cubic-bezier(0.86,0,0.07,1)}
.megamenu-mobile{display:none;padding:24px 20px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.megamenu-mobile:before{content:"\f0c9";font-family:"fontawesome";font-size:1.5rem;padding:0;left:20px;position:absolute;top:15px;transform:translateY(-25%);color:#222}
.megamenu-dropdown-icon:before{content:"\f107";font-family:"fontawesome";display:none;cursor:pointer;color:#fff;position:absolute;right:20px;top:15px}
.megamenu > ul{margin:0 auto;width:100%;list-style:none;padding:0;position:relative;box-sizing:border-box}
.megamenu > ul:before,.megamenu > ul:after{content:"";display:table}
.megamenu > ul:after{clear:both}
.megamenu > ul > li{float:left;padding:0;margin:0;text-decoration:none;transition:all .1s}
.megamenu > ul > li a{cursor:pointer;text-decoration:none;padding:15px 20px;display:block;color:#fff;font-size:14px;transition:all .1s}
.megamenu > ul > li:hover{background:#e84118}
.megamenu > ul > li > ul{display:none;width:100%;background:#fff;padding:20px;position:absolute;z-index:99;left:0;margin:0;list-style:none;text-align:left;box-sizing:border-box;;box-shadow:0 -4px 10px 0 rgba(0,0,0,0.1)}
.megamenu > ul > li > ul:before,.megamenu > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li{margin:0;padding-bottom:0;list-style:none;width:25%;background:none;float:left}
.megamenu > ul > li > ul > li a{color:#222;padding:0.2em 0;width:95%;display:block;border-bottom:1px solid rgba(0,0,0,0.1)}
.megamenu > ul > li > ul > li a:hover{color:#e84118}
.megamenu > ul > li > ul > li > ul{display:block;padding:0;margin:10px 0 0;list-style:none;box-sizing:border-box}
.megamenu > ul > li > ul > li > ul:before,.megamenu > ul > li > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li > ul > li{float:left;width:100%;padding:10px 0;margin:0;font-size:0.8em}
.megamenu > ul > li > ul > li > ul > li a{border:0}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:170px;left:auto;padding:5px 10px}
.megamenu > ul > li > ul.normal-sub > li{width:100%}
.megamenu > ul > li > ul.normal-sub > li a{border:0;padding:.5em 0}
.containersearch{background:#e84118;width:0;position:absolute;top:0;right:0;padding:0 30px;text-align:center;transition:all 0.5s ease}
.containersearch .fa{background:#e84118;color:#fff;position:absolute;font-size:19px;cursor:pointer;padding:0;top:15px;right:20px}
.inputnui{border:0!important;background:transparent;width:0%;padding:17.5px 0!important;outline:none;color:#fff;font-size:15px!important;transition:all 0.3s ease}
.containersearch.active{width:250px;padding-left:25px;transition:all 0.5s ease}
.inputnui.active{width:98%;padding-left:5px!important;transition:all 0.5s 0.8s ease}
input::placeholder{color:#fff}
.hiddenmega{transform:translateY(80px)}
@media only screen and (max-width: 959px) {
.megamenu-container{width:100%}
.megamenu-mobile,.megamenu-dropdown-icon:before{display:block}
.megamenu > ul{display:none}
.megamenu > ul > li{position:relative;width:100%;float:none;display:inline-block;text-align:left;padding:0}
.megamenu > ul > li a{padding:15px 20px;display:block}
.megamenu > ul > li > ul{position:relative;overflow-y:scroll;max-height:280px;bottom:initial}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:100%}
.megamenu > ul > li > ul > li{float:none;width:100%;margin-top:20px}
.megamenu > ul > li > ul > li:first-child{margin:0}
.megamenu > ul > li > ul > li > ul{position:relative}
.megamenu > ul > li > ul > li > ul > li{float:none}
.megamenu .show-on-mobile{display:block}
.megamenu > ul > li:hover{background:rgba(255,255,255,.1)}
.containersearch{background:transparent}
.containersearch .fa{background:transparent;color:#222}
.containersearch.active{width:100%;text-align:center}
.inputnui.active,input::placeholder{color:#888;text-align:center}}
</style>

Next, click the Save theme button and see the results on your blog.

Yup, that’s How to Install Responsive Mega Menu on Blogger that Namina can convey this time. Thank you for visiting and hopefully useful.

Anubhav Kushwahahttp://www.techkhabri.com
Friend Mai Koi Professional Blogger Nahi Hun Bas Mere Pas Jis Bhi Chij Ki Information Hai Mai Apke Sath Share Karta Hun To Ummid Hai Ki Mere Dawra Di Gai Information Apko Samj Me Aai Hogi. Thanks For Support 🙏🙏🙏

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Must Read

Faisu (Tik Tok Star), Wiki, Age, GirlsFriend, Family, Weight, Height, Bioghraphy, Net Worth

Hey Guys Today We Are Taking About Mr. Faisu I Know Everyone Know The Mr. Faisu Because He Is A Very Famous Through The...

Symptoms Of CoronaVirus । क्या हैं कोरोना वायरस के लक्षण?

जैसा की आप सभी पता है कोरोना वायरस के बारे में अगर आप नहीं जानते हाँ की कोरोना वायरस क्या है तो आप इसे...

What Is Corona Virus In Hindi

तो जैसा की आप सभी को पता है की चाइना के बाद अब कोरोनावायरस भारत में भी अपना पैर पसार रहा है। और ऐसे...

Riyaz Phone Number |Riyaz Real Number | Riyaz Number

Hello Friends I Know You Are Finding Riyaz Whatsapp Number Or Riyaz Real Phone Number So You Come Correct Website. I Share The Riyaz...

Riyaz Tik Tok Video | Riyaz Latest Tik Tok Video

Hello Friends You Know All About Riyaz This A Star Of Tik Tok And Riyaz Is A Crush Of Many Girls And I Tell...