very easy to edit the stylish menu. first go to blogger account and click on theme /Template ↓↓
Click on and now find ]]></b:skin> then paste the following given CCS code just before ]]></b:skin>
↓↓
.header-search{
background-color:#292c2f;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.15);
padding: 20px 40px;
height: 80px;
color: #ffffff;
box-sizing: border-box;
}
.header-search .header-limiter {
max-width: 1200px;
text-align: center;
margin: 0 auto;
}
/* Logo */
.header-search .header-limiter h1 {
float: left;
font: normal 28px Cookie, Arial, Helvetica, sans-serif;
line-height: 40px;
margin: 0;
}
.header-search .header-limiter h1 span {
color: #5383d3;
}
/* The header links */
.header-search .header-limiter a {
color: #ffffff;
text-decoration: none;
}
.header-search .header-limiter nav {
font:16px Arial, Helvetica, sans-serif;
line-height: 40px;
float: left;
margin: 0 0 0 60px;
padding: 0;
}
.header-search .header-limiter nav a {
display: inline-block;
padding: 0 5px;
text-decoration:none;
color: #ffffff;
font-size: 16px;
font-weight: normal;
opacity: 0.9;
}
.header-search .header-limiter nav a:hover {
opacity: 1;
}
.header-search .header-limiter nav a.selected {
color: #608bd2;
pointer-events: none;
opacity: 1;
}
/* The search box */
.header-search .header-limiter form {
float:right;
position: relative;
right: 30px;
margin-left: 40px;
border-radius: 3px;
background-color: #3a3c3e;
width: 44px;
height: 39px;
cursor: pointer;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* CSS search icon */
.header-search .header-limiter form:before {
position: absolute;
content: '';
border-radius: 50%;
border: 2px solid #fff;
width: 9px;
height: 9px;
top: 12px;
left: 14px;
}
.header-search .header-limiter form:after {
position: absolute;
content: '';
background-color: #fff;
width: 2px;
height: 8px;
top: 22px;
left: 26px;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
transform: rotate(-44deg);
}
/* The search box */
.header-search .header-limiter form input {
display: none;
position: absolute;
right: 42px;
padding: 11px 12px 9px;
border: none;
width: 210px;
border-radius: 2px 0 0 2px;
height: 39px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Making the header responsive. */
@media all and (max-width: 600px) {
.header-search {
padding: 15px;
position: relative;
}
.header-search .header-limiter h1 {
float:none;
font-size: 24px;
line-height: 1;
}
.header-search .header-limiter nav {
text-align: center;
float: none;
margin: 0;
}
.header-search .header-limiter nav a {
font-size: 13px;
}
.header-search .header-limiter form {
position: absolute;
top: 20px;
right: 20px;
}
}
.header-search nav a.selected {
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
}
.header-search a.logout-button {
font-size: 13px;
font-weight: bold;
float: right;
border-radius: 3px;
background-color: rgba(58, 60, 62, 0);
height: 40px;
padding: 0 20px;
border: 1px solid #5E6367;
line-height: 40px;
box-sizing: border-box;
}
/* The user menu */
.header-search-user-menu{
position: relative;
float:right;
background-color:#3a3c3e;
width:75px;
height:40px;
border-radius:2px;
}
.header-search-user-menu:before{
content:'';
width:0;
height:0;
top: 18px;
left: 15px;
position:absolute;
border:5px solid transparent;
border-top-color:#fff;
}
.header-search-user-menu ul{
display: none;
font:bold 13px Arial, Helvetica, sans-serif;
background-color: inherit;
list-style: none;
position: absolute;
text-align: center;
width: 125px;
top: 25px;
right: 0;
padding: 10px;
border-radius: 2px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.header-search-user-menu:active ul,
.header-search-user-menu:hover ul,
.header-search-user-menu.show ul{
display:block;
}
.header-search-user-menu ul li{
padding:5px;
}
.header-search-user-menu ul li a:hover{
opacity:0.9;
}
.header-search-user-menu ul li a.highlight{
color:#e9ac09;
}
.header-search-user-menu img{
border-radius:50%;
position:absolute;
top:6px;
max-width: 28px;
right:10px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #292c2f;
min-width: 100px;
padding: 01px 01px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
now again search for </header> teg and paste following html code just below.
↓↓
<header class="header-search"> <div class="header-limiter"> <h1><img Value='math' alt='Smiley face' float='center' height='47' src='https://2.bp.blogspot.com/-k-GhiRxhXlI/WS-VGEoQRZI/AAAAAAAAAOU/EmwDLQ_rlpIMmHR112FvpFxUN4JyPQmmQCLcB/s1600/logo.png' width='200'/> </h1> <nav> <a href="#" class="selected">Home</a> <a href="#">Bloging</a> <div class="dropdown"> <span>Dropdown</span> <div class="dropdown-content"> <a href="#">Pricing</a> <a href="#">Pricing1</a> </div> </div> <a href="#">Tricks</a> <a href="http://abhwai.blogspot.in/">Abhwai</a> </nav> <div class="header-search-user-menu"> <img src="https://4.bp.blogspot.com/-F7i7lN8MuW4/WTfn0lTqjlI/AAAAAAAAAPw/azTvyKhJAtoC9ftkvh_2MHSl8y5jteEQACLcB/s1600/download3.jp" alt="User Image"/> <ul> <li><a href="#">Email</a></li> <li><a href="#">Massge</a></li> <li><a href="#" class="highlight">chat</a></li> </ul> </div> <form method="get" action="#"> <input type="search" placeholder="Search!" name="search"/> </form> </div> </header> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-search form').on('click', function(e) { // If the form (which is turned into the search button) was // clicked directly, toggle the visibility of the search box. if(e.target == this) { $(this).find('input').toggle(); } }); }); </script> <br> </br><br> </br>
now click on Save Theme. That's it
Note! don't Remove <br> </br><br> </br> teg . becouse if you remove it then do not work Dropdown icons
I hope you enjoyed this Style Mega Drop-Down Menu With Search Box and the techniques I used. Please share this post if you like it