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;
}
.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> <a href="#" class="logout-button">Contact us</a> <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>
now click on Save Theme. That's it
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
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
