Menu Dropdown After Mboton share tips and tricks make top menu responsive plus links to social media, this time sharing mboton how to install the more menu.
Menu Dropdown
Menu navigation is simple, clean, white background, equipped with a search box. Live Demo can be seen on the demo Template Write blog. This appearance of menu design:
Menu Dropdown Just Yes my friend all the way into the core to her, here’s how to create a Simple Dropdown Menu Responsive plus the search box like the image above mboton.
1. Theme > Edit HTML
2. the following CSS code Copy above code ]]></b:skin>
.main-navigationnbt{border-bottom:solid 1px #eee;border-top:solid 1px #eee;margin-top:45px;}
.main-navigationnbt a {color: #444;font-family: 'Poppins',serif;font-size: 18px;line-height: 1.5;word-wrap: break-word;font-weight: 300;text-decoration: none;}
.menu-togglenbt,.main-navigationnbt a{line-height:58px;text-align:left;}
.main-navigationnbt{font-size:83.8%;position:relative;}
.menu-togglenbt{color:#444;cursor:pointer;text-transform:uppercase;}
.menu-togglenbt:hover{color:#666;}
.menu-togglenbt:before{content:"f0c9";display:inline-block;font:normal 14px/1 FontAwesome;-webkit-font-smoothing:antialiased;margin-right:10px;position:relative;top:-1px;vertical-align:middle;}
.main-navigationnbt ul{display:none;list-style:none;margin:0;}
.main-navigationnbt.toggled ul{display:block;}
.menu-togglenbt,.main-navigationnbt a{padding-right:40px;}
.main-navigationnbt a{border-top:solid 1px #eee;display:block;}
.main-navigationnbt .current_page_item > a,.main-navigationnbt .current-menu-item > a,.main-navigationnbt .current_page_ancestor > a{color:#111;}
.main-navigationnbt ul ul a{padding-left:30px;}
.main-navigationnbt ul ul ul a{padding-left:45px;}
.main-navigationnbt ul ul ul ul a{padding-left:60px;}
.main-navigationnbt .search-formnbt{position:absolute;right:0;top:0;}
.main-navigationnbt .search-fieldnbt{background:url(https://4.bp.blogspot.com/-5E9T6vvulGk/WHrPw1i3vnI/AAAAAAAAP0k/Ch9F7Og54Lk7dc8Cco5NyrhetV2C3mEzACLcB/s1600/search-icon.png) 5px center no-repeat;background-size:24px 24px;border:none;cursor:pointer;height:36px;margin-top:11px;padding:0 0 0 34px;position:relative;width:1px;}
.main-navigationnbt .search-fieldnbt:focus{background-color:#fff;border:solid 1px #eee;cursor:text;max-width:100%;outline:0;width:240px;}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.main-navigationnbt .search-fieldnbt{background-image:url(https://3.bp.blogspot.com/-bS8egjHLnoc/WHrPw409OZI/AAAAAAAAP0o/2Ej-_wUIyD4L_IsGRpYYsT2vO29hQTRGwCLcB/s1600/search-icon%25402x.png);}}
.main-navigationnbt .search-submitnbt{display:none;}
.ie8 .site-headernbt .search-fieldnbt{padding-top:6px;}
@media screen and (min-width:783px){.main-navigationnbt{border:none;margin-top:30px;}.menu-togglenbt,.main-navigationnbt a{line-height:58px;}.menu-togglenbt{display:none;}.main-navigationnbt ul{display:block;}.main-navigationnbt a{border-top:none;padding-left:16px;padding-right:16px;}.main-navigationnbt a:hover{;}.main-navigationnbt ul ul a,.main-navigationnbt ul ul ul a,.main-navigationnbt ul ul ul ul a{padding-left:20px;}.main-navigationnbt li{position:relative;}.main-navigationnbt div.menunbt > ul,.main-navigationnbt ul.menunbt{letter-spacing:-0.4em;padding-right:30px;text-transform:uppercase;}.no-search .main-navigationnbt div.menunbt > ul,.no-search .main-navigationnbt ul.menunbt{padding-right:0;}.main-navigationnbt div.menunbt > ul > li,.main-navigationnbt ul.menunbt > li{display:inline-block;letter-spacing:normal;text-align:left;white-space:nowrap;}.main-navigationnbt div.menunbt > ul > li:first-child > a,.main-navigationnbt ul.menunbt > li:first-child > a{padding-left:0;}.main-navigationnbt div.menunbt > ul > li.page_item_has_children > a:after,.main-navigationnbt ul.menunbt > li.page_item_has_children > a:after,.main-navigationnbt div.menunbt > ul > li.menu-item-has-children > a:after,.main-navigationnbt ul.menunbt > li.menu-item-has-children > a:after{content:"f107";display:inline-block;font:normal 16px/1 FontAwesome;-webkit-font-smoothing:antialiased;position:relative;right:-8px;top:1px;}.main-navigationnbt ul ul{background-color:#fff;box-shadow:0 1px 3px #ddd;left:-9999px;opacity:0;position:absolute;text-transform:none;top:100%;transition:opacity .3s ease-in-out;white-space:normal;width:220px;z-index:99999;}.main-navigationnbt ul ul ul{top:0;}.main-navigationnbt ul li:hover > ul{left:0;opacity:1;}.main-navigationnbt div.menunbt > ul > li:first-child:hover > ul,.main-navigationnbt ul.menunbt > li:first-child:hover > ul{left:-18px;}.main-navigationnbt ul ul li:hover > ul{left:100%;opacity:1;}.main-navigationnbt ul ul li a{border-top:1px solid #eee;line-height:1.5;padding-bottom:14px;padding-top:14px;}.main-navigationnbt ul ul li.page_item_has_children > a,.main-navigationnbt ul ul li.menu-item-has-children > a{padding-right:20px;}.main-navigationnbt ul ul li.page_item_has_children > a:after,.main-navigationnbt ul ul li.menu-item-has-children > a:after{content:">";position:absolute;right:8px;top:14px;}.main-navigationnbt .search-fieldnbt{margin-top:9px;transition:width .4s ease,background .4s ease;}
} 3. Menu Dropdown Copy the following HTML code under the cover of my friend code is all Yes header, such as in the template all of you my friend mboton.
<script type="text/javascript">
//<![CDATA[
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
( function() {
var container, button, menu;
container = document.getElementById( 'site-navigationnbt' );
if ( ! container )
return;
button = container.getElementsByTagName( 'div' )[0];
if ( 'undefined' === typeof button )
return;
menu = container.getElementsByTagName( 'ul' )[0];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
if ( -1 === menu.className.indexOf( 'nav-menu' ) )
menu.className += ' nav-menu';
button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) )
container.className = container.className.replace( ' toggled', '' );
else
container.className += ' toggled';
};
} )();
( function() {
var is_webkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
is_opera = navigator.userAgent.toLowerCase().indexOf( 'opera' ) > -1,
is_ie = navigator.userAgent.toLowerCase().indexOf( 'msie' ) > -1;
if ( ( is_webkit || is_opera || is_ie ) && document.getElementById && window.addEventListener ) {
window.addEventListener( 'hashchange', function() {
var element = document.getElementById( location.hash.substring( 1 ) );
if ( element ) {
if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) )
element.tabIndex = -1;
element.focus();
}
}, false );
}
})();
//]]>
</script> 5. Other code
Due to the design of the Menu Responsive plus Simple Dropdown search box above using typeface Poppins and use Awesome Font, add the following code below the code <head>
<link href='https://fonts.googleapis.com/css?family=Poppins:300,400,700&subset=latin-ext' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>6. Save the template all my friend!
Menu Dropdown So how to create a Simple Dropdown Menu Responsive plus search box on Blogger blogs from mboton. Good Luck and Happy Blogging!
