title: How To change LTR menu TO RTL MENU
body: <p>How I Can To Change LTR menu TO RTL MENU</p>
  
  <p><strong>1. LTR:    home  about   contact 
   2. TO RTL:       contact  about   home</strong></p>
  
  <p>you Can See the menu CSS3 Code as below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
  .clearfix{*zoom:1}
  .clearfix:before,
  .clearfix:after{display:table;content:"";line-height:0}
  .clearfix:after{clear:both}
  .hide-text{font:0/0 a;
             color:transparent;
             text-shadow:none;
             background-color:transparent;border:0}
             .input-block-level{display:block;
                                width:100%;min-height:30px;
                                -webkit-box-sizing:border-box;
                                -moz-box-sizing:border-box;
                                box-sizing:border-box}
  body{padding-top:80px;
       font-size:12px;
       color:#34495e;
       background:#f5f5f5;
      direction: rtl;
  }
       body h1,body h2,body h3,body h4,body 
       .created{font-family:"Fjalla One";font-weight:normal}
  body h5,body h6{margin:0}body h3,body h4{margin-top:0}
  .btn{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:0;background-image:none;text-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
  .btn.btn-transparent{border:3px solid #fff;background:transparent;color:#fff}
  .btn.btn-transparent:hover{border-color:rgba(255,255,255,0.5)}
  .btn.btn-link{color:#2dcc70;padding:0}
  .btn.btn-link:hover{text-decoration:none}
  .btn-primary{background-color:#2dcc70}
  .btn-primary:hover{background-color:#24a259}
  a{color:#2dcc70;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}
  a:hover,a:focus{color:#005580;text-decoration:none;outline:0}
  .dropdown-menu
  {
      margin-top: -1px;
      min-width: 180px;
  }
  body&gt;section{padding:50px 0}body&gt;section#slide-show{padding:0}
  #recent-works{background:#2dcc70;color:#fff}
  #recent-works .links&gt;a{background:#fff;color:#2dcc70;text-shadow:none}
  #clients{background:#fff}#clients h4{color:#999}
  #clients .carousel{margin-bottom:0}
  #clients .clients ul.thumbnails{margin:0}
  #clients .clients ul.thumbnails&gt;li{text-align:center;margin-bottom:0}
  #clients .prev,#clients .next{color:#999}
  .title{background:#2dcc70;color:#fff;padding:20px 0}
  .center{text-align:center}
  .box{background-color:#fff;border-top:1px solid #f0f0f0;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);padding:10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
  .progress{margin-bottom:10px}
  .progress,.progress .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;text-shadow:none;height:30px;line-height:30px}
  .label,.badge{font-weight:300;font-size:90%}ul.breadcrumb{margin:12px 0 0;background:transparent}
  ul.breadcrumb&gt;li{text-shadow:none}
  ul.breadcrumb&gt;li&gt;a,ul.breadcrumb&gt;li .divider{color:#fff}
  ul.breadcrumb&gt;li.active{color:rgba(255,255,255,0.7)}
  ul.tag-cloud li{display:inline-block;margin:0 0 2px 0}
  .btn-social{border:0;color:#fff;text-shadow:0 1px rgba(0,0,0,0.5)}
  .btn-social.btn-facebook{background:#4f7dd4}
  .btn-social.btn-facebook:hover{background:#789bde}
  .btn-social.btn-twitter{background:#5bceff}
  .btn-social.btn-twitter:hover{background:#8eddff}
  .btn-social.btn-linkedin{background:#21a6d8}
  .btn-social.btn-linkedin:hover{background:#49b9e3}
  .btn-social.btn-google-plus{background:#dc422b}
  .btn-social.btn-google-plus:hover{background:#e36957}
  .btn-social:hover{color:#fff}
  header.navbar .navbar-inner
  {
      background: #fff !important;
      border: 0;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
  }
  header #logo{width:220px;height:80px;background:url(../images/logo.png) no-repeat 0 50%}
  header.navbar
  {
      margin-bottom: 0;
  }
  header.navbar .nav
  {
      margin-top: 20px;
      direction:rtl;
  }
  header.navbar .nav &gt; li
  {
      margin-left: 1px;
  }
  header.navbar .nav &gt; li &gt; a
  {
      padding-top: 10px;
      padding-bottom: 10px;
      color: #333;
      font-family: "Fjalla One";
      font-size: 14px;
      text-transform: uppercase;
      text-shadow: none;
  }
  header.navbar .nav&gt;li&gt;a:hover{background:transparent;color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
  header.navbar .nav&gt;li.active&gt;a,header.navbar .nav&gt;li.active&gt;a:hover{background:transparent;color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
  header.navbar .nav&gt;li.dropdown.open&gt;a.dropdown-toggle{background:transparent;color:#2dcc70}
  header.navbar .nav&gt;li.login&gt;a{border-left:1px solid #e5e5e5}
  header .dropdown-menu
  {
      margin-top: 20px;
  }
  header .dropdown-menu:before
  {
      display: none !important;
  }
  .navbar .nav li.dropdown.open&gt;.dropdown-toggle,.navbar .nav li.dropdown.active&gt;.dropdown-toggle,.navbar .nav li.dropdown.open.active&gt;.dropdown-toggle{background-color:transparent;color:#2dcc70}
  .navbar .nav &gt; .active &gt; a, .navbar .nav &gt; .active &gt; a:hover, .navbar .nav &gt; .active &gt; a:focus
  {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
  }
  .navbar .nav &gt; li &gt; a:focus, .navbar .nav &gt; li &gt; a:hover
  {
      color: #2dcc70;
  }
  .dropdown-menu
  {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      padding: 0;
      border: 0;
  }
  .dropdown-menu &gt; .active &gt; a, .dropdown-menu &gt; .active &gt; a:hover, .dropdown-menu &gt; .active &gt; a:focus, .dropdown-menu &gt; li &gt; a:hover, .dropdown-menu &gt; li &gt; a:focus, .dropdown-submenu:hover &gt; a, .dropdown-submenu:focus &gt; a
  {
      background: #24a259;
  }
  .main-info{background-color:#fff;color:#999}
  .main-info h4{color:#999}
  .icon-medium{font-size:18px;width:18px;line-height:18px;text-align:center;display:inline-block;background:#2dcc70;padding:10px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;color:#fff}
  .modal{border:0}
  .modal#loginForm{width:600px;margin-left:-300px}
  .modal .modal-header{border:0;padding:20px 20px 0}
  .modal .modal-header&gt;h4{font-weight:300;font-size:14px;color:#848484;text-transform:uppercase;margin:0}
  .modal .modal-body{padding:20px}
  .modal input[type="text"],.modal input[type="password"]{padding:5px 10px;min-height:30px;width:130px;margin-right:10px}
  .modal .icon-remove{color:#848484;position:absolute;right:-5px;top:-5px;width:16px;height:16px;line-height:16px;text-align:center;display:block;background:#ebebeb;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;cursor:pointer}
  .modal button{margin-left:10px;border:0}.gap{margin-bottom:50px}
  .big-gap{margin-bottom:100px}.no-margin{margin:0;padding:0}
  #services{background:#252525;color:#999}
  #services h1,#services h2,#services h3,#services h4,#services h5,#services h6{color:#fff}
  #main-contents{margin-top:20px}#main-contents .blog-news .created{font-size:18px;color:#2dcc70}
  .registration-form{border:0;background-color:#fff;border-top:1px solid #f0f0f0;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);padding:20px;display:inline-block}#bottom{background:#232323;color:#6f6f6f}
  #bottom h4{margin-top:0;margin-bottom:15px}
  #bottom h1,#bottom h2,#bottom h3,#bottom h4,#bottom h5,#bottom h6{color:#fff}
  #bottom a{color:#6f6f6f}
  #bottom a:hover{color:#2dcc70}
  #bottom ul.address&gt;li{position:relative;padding-left:20px;margin-top:10px}
  #bottom ul.address&gt;li:first-child{margin-top:0}
  #bottom ul.address&gt;li&gt;i{position:absolute;top:3px;left:0}
  #bottom ul.thumbnails{margin-bottom:0}
  #bottom ul.thumbnails li{margin-bottom:5px}
  ul.arrow,ul.arrow-double,ul.tick,ul.cross,ul.star,ul.rss{list-style:none;padding:0;margin:0}
  ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before,ul.arrow li::after,ul.arrow-double li::after,ul.tick li::after,ul.cross li::after,ul.star li::after,ul.rss li::after{font-family:FontAwesome;font-size:11px}
  ul.arrow li::before, ul.arrow-double li::before, ul.tick li::before, ul.cross li::before, ul.star li::before, ul.rss li::before
  {
      margin-right: 5px;
  }
  ul.arrow li::before{content:"\f105"}
  ul.arrow-double li::before{content:"\f101"}
  ul.tick li::before{content:"\f00c"}
  ul.cross li::before{content:"\f00d"}
  ul.star li::before{content:"\f006"}
  ul.rss li::before{content:"\f09e"}
  #footer{background:#333;padding-top:15px;padding-bottom:15px;color:#666}
  #footer a{color:#666}
  #footer a:hover{color:#2dcc70}
  #footer #gototop{height:40px;line-height:40px;width:40px;text-align:center;display:inline-block;background:#1d1d1d;font-size:24px;color:#fff}
  #footer #gototop:hover{background:#2b2b2b;text-decoration:none}
  #footer .cp{margin-top:11px}
  ul.social{list-style:none;margin:10px 0 0;padding:0;display:inline-block}
  ul.social&gt;li{display:inline-block;margin:0 5px}
  ul.social&gt;li&gt;a{font-size:24px;color:#666}
  ul.social&gt;li&gt;a:hover{color:#999}
  .box-border{padding:15px}
  .accordion-group{background-color:#fff;border-top:1px solid #f0f0f0}
  .accordion-heading .accordion-toggle{color:#666;font-weight:700}
  .accordion-inner{border-top:0}
  .blog .blog-item h2{margin-top:0}
  .blog .blog-item .date span{display:block;text-align:center}
  .blog .blog-item .date span.day{font-size:50px;line-height:50px;padding-top:10px;font-family:"Fjalla One",sans-serif}
  .blog .blog-item .date span.month{font-size:18px}
  .blog .blog-item .tag{margin-top:5px}
  .blog .blog-item .avatar{margin-top:5px}
  select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;min-height:50px;padding:0 15px;border:3px solid #ededed}select:focus,textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.input-block-level{min-height:50px}textarea#message{padding:10px 15px;height:219px}.widget{margin-bottom:30px}.widget&gt;h3{font-size:16px;margin-top:0}.widget h5{margin-top:10px}.widget .date{margin-top:5px;padding:8px 10px;background:#2dcc70}.widget .date&gt;span{display:block;text-align:center;font-family:"Fjalla One";color:#fff}.widget .date&gt;span.month{font-size:14px;line-height:14px;font-weight:700;text-transform:uppercase}.widget .date&gt;span.day{font-size:18px;line-height:18px}
  #pricing-table{margin-top:20px;margin-bottom:30px}
  #pricing-table .plan{list-style:none;margin:0;padding:0;color:#fff}
  #pricing-table .plan.featured{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}#pricing-table .plan&gt;li{padding:10px 15px}#pricing-table .plan&gt;li.plan-name{background:rgba(0,0,0,0.1)}#pricing-table .plan&gt;li.plan-name h3{margin:10px 0}#pricing-table .plan&gt;li.plan-action{padding:20px 0}#pricing-table .plan1{background:#1abc9c}#pricing-table .plan2{background:#e74c3c}#pricing-table .plan3{background:#3498db}#pricing-table .plan4{background:#9b59b6}ul.gallery{display:block;margin:-15px}ul.gallery.col-1 li{width:100%}ul.gallery.col-2 li{width:50%}ul.gallery.col-3 li{width:33.3333%}ul.gallery.col-4 li{width:25%}ul.gallery li{display:block;padding:0;margin:0;float:left}ul.gallery li .desc{margin:15px}ul.gallery li .preview{margin:15px;display:block;position:relative}ul.gallery li .preview .overlay{width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,0.6);opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 300ms;-moz-transition:opacity 300ms;-o-transition:opacity 300ms;transition:opacity 300ms}ul.gallery li .preview .links{width:104px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-52px;opacity:0;filter:alpha(opacity=0);-webkit-transform:translate(0,-50px);-moz-transform:translate(0,-50px);-ms-transform:translate(0,-50px);-o-transform:translate(0,-50px);transform:translate(0,-50px);-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}ul.gallery li .preview .links&gt;a{width:50px;height:40px;line-height:40px;display:inline-block;text-align:center;background:#2dcc70;color:#fff;text-shadow:0 1px rgba(0,0,0,0.3);font-size:18px;margin:0 1px}ul.gallery li .preview:hover .overlay,ul.gallery li .preview:hover .links{opacity:1;filter:alpha(opacity=100)}ul.gallery li .preview:hover .links{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.faq{list-style:none;margin:0}ul.faq li{margin-top:30px}ul.faq li:first-child{margin-top:0}ul.faq li span.number{display:block;float:left;width:50px;height:50px;line-height:50px;text-align:center;background:#2dcc70;color:#fff;font-size:24px}ul.faq li&gt;div{margin-left:70px}ul.faq li&gt;div h3{margin-top:0}#error{text-align:center;margin-top:150px;margin-bottom:150px}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="nav-collapse collapse pull-right" &gt;
                          &lt;ul class="nav" &gt;
                              &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="about-us.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;
                                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Pages &lt;i class="icon-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="career.html"&gt;Career&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="blog-item.html"&gt;Blog Single&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="faq.html"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="pricing.html"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="404.html"&gt;404&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="typography.html"&gt;Typography&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="registration.html"&gt;Registration&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="divider"&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="privacy.html"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="terms.html"&gt;Terms of Use&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt; 
                              &lt;li&gt;&lt;a href="contact-us.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="login"&gt;
                                  &lt;a data-toggle="modal" href="#loginForm"&gt;&lt;i class="icon-lock"&gt;&lt;/i&gt;&lt;/a&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;    
                      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  
  AND you Can See the menu html Code as below:</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can find the Zip file of complete html website at:
  <a href="https://files.fm/down.php?i=kcteb6x9&amp;n=Good18_OK2.zip" rel="nofollow noreferrer">https://files.fm/down.php?i=kcteb6x9&amp;n=Good18_OK2.zip</a>
  OR
  <a href="https://ufile.io/2dqow" rel="nofollow noreferrer">https://ufile.io/2dqow</a></p>
  
  <pre><code>&lt;div class="nav-collapse collapse pull-right" &gt;
                      &lt;ul class="nav" &gt;
                          &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="about-us.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Pages &lt;i class="icon-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="career.html"&gt;Career&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="blog-item.html"&gt;Blog Single&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="faq.html"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="pricing.html"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="404.html"&gt;404&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="typography.html"&gt;Typography&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="registration.html"&gt;Registration&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="privacy.html"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="terms.html"&gt;Terms of Use&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="contact-us.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="login"&gt;
                              &lt;a data-toggle="modal" href="#loginForm"&gt;&lt;i class="icon-lock"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/li&gt;
  
                      &lt;/ul&gt;    
                  &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  </code></pre>
  
  <p>Best Regards For Your Help.</p>