Sticky Drop-down Menu Bar With Search And Title

Sticky Drop-down Menu Bar With Search And Title

Drop-down menu is a graphical control element, similar to a button, that allows user to choose one value from a list. When a drop-down button is inactive, it displays nothing. When activated or clicked, it displays (drops down) a list , from which the user may select one.

Why Use LT - DropDown Menu In Your Site ?

  • Responsive: Adjust width according to device width. Easy to use in both desktop and mobile version.
  • Fast: It requires no external resources and loads very quickly.
  • Theme: Adjust theme color to match your site design.
  • Embedded Search: It is also embedded with search form.
  • Sticky: It uses a script which shows it in top all the time even if user is scrolling.
How To Setup Drop Down Menu For Your Site ?

The codes for LT dropdown menu is divided into three parts (JS , HTML , CSS) copy and paste all codes to your site's code.


<script src='' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var ks_widget_top = $(&#39;#sticky1&#39;).offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop();     
        if (ks_current_top &gt; ks_widget_top) {
          $(&#39;#sticky1&#39;).css({ &#39;right&#39;:0 , &#39;position&#39;: &#39;fixed&#39;,&#39;top&#39;:0, &#39;left&#39;:0, &#39;z-index&#39;:999999 });
        } else {
            $(&#39;#sticky1&#39;).css({ &#39;position&#39;: &#39;relative&#39; });
      $(window).scroll(function() {

Note: Place above codes in between <head> and </head> in your html codes.


<div id='sticky1'>
<div class='navmob'>
  <div style='display:inline; !important'><div class='ddm'><div class='dropdown'>
<button class='dropbtn' onclick='myFunction()'/>
  <div class='dropdown-content' id='myDropdown'>
    <a href='Url Of Categorie'>Name of categorie </a>
<a href='Url Of Categorie'>Name of categorie </a>
 <a href='Url Of Categorie'>Name of categorie </a>
 <a href='Url Of Categorie'>Name of categorie </a>
<br/><div id='menu-search'>
<form action='/search' method='get'>
<input name='q' onblur='if (&apos;&apos; === this.value) {this.value = &apos;Search here…&apos;;}' onfocus='if (&apos;Search here…&apos; === this.value) {this.value = &apos;&apos;;}' type='text' value='Search here…'/>
function myFunction() {
window.onclick = function(event) {
  if (!;.dropbtn&#39;)) {
    var dropdowns = document.getElementsByClassName(&quot;dropdown-content&quot;);
    var i;
    for (i = 0; i &lt; dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains(&#39;show&#39;)) {
  </script><script>$(&quot;#menu-search&quot;).click(function(event){ event.stopPropagation(); });</script></div>&#160;<h1><a class='navtxt1' href='/'>Your Site Name</a></h1>
  <div style='line-height:2px'><br/></div></div></div></div>

Note: Place these codes just after <body> tag in your html and change red bold text with desired values.


h1{ display:inline; !important}
h1{text-shadow:2px 2px 2px #000000;}
.dropbtn {
  background:url( no-repeat center;
    padding: 16px;
    border: none;
    cursor: pointer;
.dropbtn:hover, .dropbtn:focus {
    background:url( no-repeat center;
.dropdown {
    position: relative;
    display: inline-block;
.dropdown-content {
    display: none;padding: 20px 20px;
    position: absolute;
    background-color: #000000;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
.dropdown-content a {
    color: #ffffff;
    padding: 10px;
border: 1px solid #353535;
    background-color: #1c1c1c;
    text-decoration: none;
    display: block;
.dropdown a:hover {background-color: #353535}
.show {display:block;}
.navtxt1 {
float:left;margin:2px 0px 0 5px;
color: white !important;
.navtxt1:hover {
.ddm {
margin:0px 0px 0 5px;float:left;

.navmob {
border: 1px solid #ff0000;
color: white !important;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);


Note: Add above code in your stylesheet, For , blogger add these codes just above ]]>< in you html. For, wordpress add these css by customization>add css and for changing theme color change red bold values with your html color value.

No comments:

Post a Comment