اضافة قائمة افقية لعرض الصفحات متجاوبة

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

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

<style>
/*================================
           القائمة العلوية
================================*/
.width {width: 98%;margin: 0 auto;}
.header-top {height: 40px;overflow: hidden;background:  #29567D;border:4px solid #fff}
.header-top:hover{background-color:#F74047;text-decoration:none;transition:1s;background:#29567D;background-image:linear-gradient(110deg,#F74047 0%,#F74047 50%,transparent 50%,transparent 100%);background-size:200%;background-position:150% 0;background-repeat:no-repeat;transition:background-position 1.9s ease,color 1.15s ease}
.menu-top {float: right;}
.menu-top li {float: right;}
.menu-top li:after {content: "|";color: rgba(238, 238, 238, 0.14);}
.menu-top a {padding:8.5px;display: inline-block;font-family: 'Acme',El Messiri;font-weight: 700;font-size: 15px;color: #fff;box-shadow: inset 0 3px 9px rgba(0,0,0,.25);}
.menu-top a:hover{box-shadow: inset 1px 1px 10px 30px #F74047;
color:#fff;}
.social-top {float: left;padding: 5px 10px 0 0;}
.social-top li {float: right;}
.social-top li a:hover:before {-webkit-animation: toTopFromBottom .3s forwards;-moz-animation: toTopFromBottom .3s forwards;animation: toTopFromBottom .3s forwards;box-shadow: inset 0 3px 9px rgba(0,0,0,.25);}
.social-top .LinkList ul{text-align:center}
.social-top a{display: block;width: 30px;height: 30px;font-size: 14px;color: #fff;line-height: 35px;transition: 0.3s;background:#F74047 ;margin-right: 5px;border-radius:2px;overflow:hidden;text-align: -webkit-center;box-shadow: inset 0 3px 9px rgba(0,0,0,.25);}
.social-top a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:27px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.social-top .facebook:before{content:"\f09a"!important;}
.social-top a.facebook:hover{background:#3b5998;}
.social-top .twitter:before{content:"\f099"!important}
.social-top a.twitter:hover{background:#55acee;}
.social-top .gplus:before{content:"\f0d5"!important}
.social-top a.gplus:hover{background:#DD4B39;}
.social-top .rss:before{content:"\f09e"!important;}
.social-top ul a.rss:hover{background:#FFC200;}
.social-top .youtube:before{content:"\f167"!important;}
.social-top a.youtube:hover{background:#e52d27;}
.social-top .skype:before{content:"\f17e"!important;}
.social-top a.skype:hover{background:#00aff0;}
.social-top .stumbleupon:before{content:"\f1a4"!important;}
.social-top a.stumbleupon:hover{background:#eb4924;}
.social-top .tumblr:before{content:"\f173"!important;}
.social-top a.tumblr:hover{background:#35465c;}
.social-top .vine:before{content:"\f1ca"!important;}
.social-top a.vine:hover{background:#00b488;}
.social-top .stack-overflow:before{content:"\f16c"!important;}
.social-top a.stack-overflow:hover{background:#fe7a15;}
.social-top .linkedin:before{content:"\f0e1"!important;}
.social-top a.linkedin:hover{background:#0976b4;}
.social-top .dribbble:before{content:"\f17d"!important;}
.social-top a.dribbble:hover{background:#ea4c89;}
.social-top .soundcloud:before{content:"\f1be"!important;}
.social-top a.soundcloud:hover{background:#f80;}
.social-top .behance:before{content:"\f1b4"!important;}
.social-top a.behance:hover{background:#1769ff;}
.social-top .digg:before{content:"\f1a6"!important;}
.social-top a.digg:hover{background:#000;}
.social-top .instagram:before{content:"\f16d"!important;}
.social-top a.instagram:hover{background:#3f729b;}
.social-top .pinterest:before{content:"\f0d2"!important;}
.social-top a.pinterest:hover{background:#cc2127;}
.social-top .delicious:before{content:"\f1a5"!important;}
.social-top a.delicious:hover{background:#39f;}
  .resp-desk1{display:none}
nav select {width: 100%;margin: 6px 0px 10px 0;cursor: pointer;padding: 6px;background: #ED3D44;border: none;color: #fff;} option{background: #29567D;color: #fff;}
@media (max-width: 800px){.nav1{display:none}.resp-desk1{display:block;margin-top:0}nav{margin:0;background:none}.main-nav{background:none;border-bottom:none}.nav1 li a,.nav1 li a:hover,.nav1 li a.home{background:#29567D;color:#fff;border:0;margin:0}.nav1 li{display:block;margin:0}}
..menu-top li:hover,.social-top li:hover{  -webkit-animation:rubberBand .8s 1;  -moz-animation:rubberBand .8s 1;  -o-animation:rubberBand .8s 1;  animation:rubberBand .8s 1}
</style>
<link href='https://cdn.rawgit.com/th3littleprof/elprof/master/amine.css' rel='stylesheet' type='text/css'/>

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

<!-- بداية القائمة الافقية (كن مهووس) -->
<div class='header-top wow animated bounceInDown animated'>
<div class='width'>
<div class='menu-top'>
<div class='page-top wow animated bounceInRight animated'>
<nav id='menu-top'>
<ul id='nav1'>
  <div class='resp-desk1'><a href='#' id='duled1'><i class='fa fa-reorder'/> الصفحات</a></div>
<button class='homer' onclick='document.getElementById(&amp;apos;ads-box&amp;apos;).style.top=&amp;apos;60px&amp;apos;;document.getElementById(&amp;apos;count-box&amp;apos;).style.display=&amp;apos;none&amp;apos;;'><a href='#' style='color:#fff;'><i class='fa fa-bars fa-l'/> مواقع ندعمها </a></button>
<li><a href='/p/blog-page_57.html'>سياسة الخصوصية</a></li>
<li><a href='/p/terms.html'> اتفاقية الاستخدام</a></li>
<li><a href='/p/blog-page_49.html'>التبادل الاعلاني</a></li>
<li><a href='/p/chat.html'> اطلب اضافتك</a></li>
<li><a href='/p/broken-link.html'> الروابط المعطوبة</a></li>
<li><a href='/p/password.html'>هدايا الموقع</a></li>
</ul>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var str=location.href.toLowerCase();$('#menu-top ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('.resp-desk1');menu=$('#menu-top ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>
  </nav>
<div class='clear'/>
</div>
</div>
<div class='social-top'>
<div class='socila-media' id='social-media'>
  <ul>
<li><a class='youtube' href='https://www.youtube.com/channel/UC59xbKG9NMY4Q8vsozfzLkQ' title='youtube'/></li>
<li><a class='rss' href='http://' title='rss'/></li>
<li><a class='twitter' href='http://' title='twitter'/></li>
<li><a class='gplus' href='https://plus.google.com/u/0/+MidoOops' title='gplus'/></li>
<li><a class='facebook' href='https://www.facebook.com/cn1gk' title='facebook'/></li>
</ul>
  </div>
</div>
</div>
</div>
<!-- نهاية القائمة الافقية (كن مهووس) -->

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