-3

I have a web page with a menu made with the bootstrap framework. This menu in its mobile version appears when you click on the toggle button that appears in the upper right corner. This menu slides from the top down and looks like this:

enter image description here

The code of this header menu is this:

     <!--========== HEADER ==========-->
          <header class="header navbar-fixed-top">
              <!-- Navbar -->
              <nav class="navbar">
                  <div class="container" id="main_header_container">
                      <!-- Brand and toggle get grouped for better mobile display -->
                      <div class="menu-container">
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                              <span class="sr-only">Toggle navigation</span>
                              <span class="toggle-icon"></span>
                          </button>

                          <!-- Logo -->
                          <div class="logo">
                              <a class="logo-wrap" href="https://pixels.com/index">
                                  <img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
                                  <img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
                              </a>
                          </div>
                          <!-- End Logo -->

                      </div>

                      <!-- Collect the nav links, forms, and other content for toggling -->
                      <div class="collapse navbar-collapse nav-collapse">
                          <div class="menu-container">

                              <ul class="navbar-nav navbar-nav-right">
                                  <li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>

                                  <li class="nav-item dropdown">

                                   <a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>
                                  
                                  <ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
          
                                    <li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>
                                    
                                    <li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
                                    <li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>

                                    </ul>
                    
                                    </li>

                                    <div id="myDropdown" class="dropdown-content">

                                    <li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
                                    <li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
                                    <li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
                                    
                                    </div>
                                
                                   <li class="nav-item dropdown">
                                   <a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
                                   <a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a> 
                                
                                  <ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
                                  <li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>
                                  
                                    </ul>
                    
                                    </li>

                                    <div id="myDropdown1" class="dropdown-content1">

                                    <li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>
                                    
                                    </div>
                  
                                  <li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>

                                  <li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>

                              </ul>
                          </div>
                      </div>
                      <!-- End Navbar Collapse -->
                  </div>
              </nav>
              <!-- Navbar -->
          </header>
          <!--========== END HEADER ==========-->

What I would like to do is that the header menu slide from left to right, something like this:

enter image description here

How Can I do that with css?

Community
  • 1
  • 1
Marcos Schmell
  • 47
  • 1
  • 9
  • Short answer, its not that simple, long answer, here https://bootstrapious.com/p/bootstrap-sidebar – Chizzele May 02 '19 at 23:00
  • Have you actually tried to research this?? A quick Google search (left to right sliding nav bootstrap) literally brings up thousands of links... – Studocwho May 02 '19 at 23:01
  • Possible duplicate of [Bootstrap - How to slide nav bar from left instead from top](https://stackoverflow.com/questions/31641352/bootstrap-how-to-slide-nav-bar-from-left-instead-from-top) – Studocwho May 02 '19 at 23:02

1 Answers1

0

change this class : navbar-nav-right to navbar-nav-left

   <ul class="navbar-nav navbar-nav-left">
   <li class="nav-item"><a class="nav-item-child nav-item- 
    hover" href="https://pixels.com/index">HOME</a></li>
Kamlesh Jain
  • 68
  • 6