اضافة قائمة رئيسية متجاوبة v2

شرح طريقة التركيب

1. احتفظ بنسخة احتياطية من القالب لتجنب حدوث ايه مشاكل
2. توجه الى تحرير html 
3. تاكد اولا من حذف ستايل واكواد القائمة الموجودة عندك
4. ابحث عن </head> واضف الاكواد التالية قبله

<style>
/* CSS Main Menu */
#menu-wrapper1{background:#29567D;height:50px;width:99%;position:relative;border:4px solid #fff;border-bottom:4px solid #F74047;}
#menu{background:#29567D;color:#fff;height:50px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu ul{height:50px}
#menu li{float:right;display:inline;position:relative;font-size:12px;font-weight:400;text-transform:uppercase;}
#menu li a{color:#fff;}
#menu a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}
#menu li:hover &gt; a{background:#29567D;color:#fff;}
#menu li a:hover{color:#fff;}
#menu li:last-child a{border-left:none;}
#menu input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}
#menu label{font-size:30px;font-weight:400;text-transform:uppercase;display:none;width:35px;height:51px;line-height:51px;text-align:center}
#menu label span{font-size:13px;position:absolute;right:35px}
#menu ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;min-width:166px;background:#29567D;position:absolute;z-index:99;color:#fff;top:50px;-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transform:scale(0.8);transform:scale(0.8);transition:all 0.3s ease-in-out;}
#menu li:hover &gt; ul.menus{visibility:visible;opacity:1;-moz-transform:scale(1.0);-o-transform:scale(1.0);-webkit-transform:scale(1.0);transform:scale(1.0);}
#menu a.ai,#menu a.trigger2{padding:0 14px 0 27px;transition:all 0.3s linear;}
#menu &gt; li:hover &gt; a.ai,#menu a.ai:hover{background:#29567D;color:#fff;}
#menu li &gt; a.ai::after {content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;left:10px;}
#menu li:hover &gt; a.ai{box-shadow:inset 0 4px 0 0 #ea5a59;}
#menu ul.menus a{background:#29567D;color:#fff;border-bottom:1px solid #F74047;
border-top:1px solid #333c3f;transition:all 0.2s linear;}
#menu ul.menus a:hover{background:#F74047;color:#fff;transition:all .1s linear;}
#menu ul.menus li{display:block;width:100%;font-size:13px;font-weight:400;text-transform:none;}
#menu ul.menus li a:before {visibility:hidden;opacity:0;content:&quot;\f060&quot;;font-family:FontAwesome;font-size:12px;font-style:normal;font-weight:normal;top:0;right:35px;margin-left:10px;position:absolute;padding:0;color:#F74047;transition:all 0.2s ease-in-out;}
#menu ul.menus li a:hover:before {right:10px;visibility:visible;opacity:1;}
#menu ul.menus li:hover{width:100%;}
#menu ul.menus li:last-child {border-bottom:none;}
#menu ul.menus li:first-child a{border-top:none;}
#menu ul.menus li:last-child a{border-bottom:none;}
#menu ul.menus &gt; li:hover &gt; a {background:#F74047;color:#fff;padding-right:25px;transition:all 0.1s linear;}
#menu .homers a{background:#F74047;color:#fff;margin-right:20px;padding:3px 10px;margin-top: -6px;}
#menu .homers a:hover{background:#ca1616;color:#fff;}
#menu .homers .fa.fa-home{text-align:center;color:#fff;line-height:50px;}
#menu .arlina a{color:#fff;line-height:47px;}
#menu .arlina a:hover{color:#fff;}
#menu .arlina .fa.fa-download{text-align:center;background:#29567D;color:#fff;line-height: 15px;padding:8px 6px;border-radius:3px;transition:all 0.3s ease-in-out;}
#menu .arlina .fa.fa-download:hover{background:#fff;color:#F74047;}
/* CSS Fixed Search Button */
.lyco-search {position:relative;padding:0;height:0;margin:0 auto;}
#menu ul li.searchbutton {background:#F74047;margin:0;padding:2px 17px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;float:left;}
#menu ul li.searchbutton.active {background:#F74047;color:#fff;}
#menu ul li.searchbutton:after {content:&quot;\f002&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#fff;position:relative;}
#menu ul li.searchbutton.active:after {color:#fff;}
.search-form {display:none;position:fixed;bottom:0;background:#fff;
padding:5px 0;width:100%;z-index:91;margin:0 auto;}
.searchform {margin:0 auto;text-align:center;line-height:45px;}
.searchbar {background:transparent;border:none;width:70%;padding:0 10px;font-weight:400;font-size:20px;color:#999;margin:0 auto;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;font-family:El Messiri}
.searchbar:focus {color:#666;}
.searchsubmit {background:#29567D;border:none;outline:none;cursor:pointer;font-family:El Messiri;
color:#fff;padding:0 25px;text-transform:uppercase;font-weight:400;font-size:16px;line-height:45px;border-radius:2px;
transition:background-color 1s ease-out 0s;}
.searchsubmit:hover {background:#fff;color:#666;box-shadow: inset 0 0 0 1px #29567D;}
.searchsubmit:active {background:#F74047;color:#fff;box-shadow:none;border:none;outline:none;}
@media screen and (max-width:960px) {
#menu{position:relative;background:#29567D;color:#fff;}
#menu ul{background:#29567D;position:absolute;top:100%;left:0;right:0;z-index:5;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;}
#menu li{display:block;width:100%;text-align:right;}
#menu a{border:none;}
#menu li a{color:#fff;}
#menu li a:hover{background:#F74047;color:#fff}
#menu li:hover{background:#F74047;color:#fff;}
#menu li:hover &gt; a.ai,#menu a.ai:hover{background:#F74047;color:#fff;}
#menu li:hover &gt; a,#menu li a:hover{background:#F74047;color:#fff;box-shadow:none;transition: .3s linear;}
#menu li:hover &gt; ul.menus{display:block;}
#menu ul.menus a{background:#29567D;color:#fff;border-bottom:none;}
#menu ul.menus a:hover{background:#F74047;color:#fff;border-right:none;}
#menu ul.menus li{background:#29567D;color:#fff;border-bottom:none;}
#menu ul.menus li:hover{background:#F74047;color:#fff;border-right:none;}
#menu ul.menus li a{background:#29567D;color:#fff;border-bottom:none;}
#menu ul.menus li a:hover{background:#F74047;color:#fff;border-right:none;}
#menu ul.menus li a:hover:before {color:#fff;}
#menu input,#menu label{display:inline-block;position:absolute;left:0;top:0;}
#menu input:after,#menu label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#fff;
display:inline-block;position:absolute;left:15px;top:25%;line-height:30px;}
#menu input{z-index:4}
#menu input:checked + label{color:#fff;font-weight:700}
#menu input:checked ~ ul{display:block}
#menu .homers a{background:transparent;color:#fff;margin-right:0;}
#menu .homers a:hover{background:#F74047;color:#fff;}
      #menu ul li.searchbutton {float:none;width:auto;text-align:right;cursor:pointer;}}
</style>

1. الان ضع هذة الاكواد مكان اكواد القائمة التى حذفتها وعدلها كما تريد

<!-- بداية القائمة المنسدلة (كن مهووس) -->
<div class='lyco-search'>
</div>
  <div class='search-form'>
<form action='/search' class='searchform' method='get'>
  <input class='searchbar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='ابحث هنا'/>
  <input class='searchsubmit' type='submit' value='بحث'/>
</form>
</div>
<div class='clear'/>  
<div id='menu-wrapper1' style='margin-top:25px'>
<div class='content-wrapper'>
            <nav id='menu'>
<input type='checkbox'/>
<label/>
<ul>
  <li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'/></a></li>
<li><a href=''>قائمه</a></li>
<li><a class='ai' href='#'>قائمة منسدلة</a>
<ul class='menus'>
<li><a href='#'>قسم a</a></li>
<li><a href='#'>قسم b</a></li>
<li><a href='#'>قسم c</a></li>
</ul>
</li>
<li><a href=''>أزرار المرفقة</a></li>
<li><a class='ai' href='#'>قائمة منسدلة</a>
<ul class='menus'>
<li><a href='#'>قسم 1</a></li>
<li><a href='#'>قسم 2</a></li>
<li><a href='#'>قسم 3</a></li>
</ul>
</li>
<li><a href=''>صفحة 404</a></li>
<li class='searchbutton'/>
</ul>
</nav>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('.searchbutton').click(function(){
  $(this).toggleClass('active');
  $('.search-form').slideToggle('normal');
});
});
//]]>
</script>
<!-- نهاية القائمة المنسدلة (كن مهووس) -->

1. احفظ القالب