I can not adjust the navbar with the sidebar

0

What happens is that the sidebar covers the navbar, when the screen is minimized it is possible to visualize that the navbar exists, but what I want is that the navbar is on the right side of the sidebary that when the screen is minimized it adjusts , I also do not know if I am using the wrapper correctly ... install with npm the wrapper in angular, but take the effect I want ...

I enclose some tests to observe how it looks ... in the first photo the browser is in full screen ... In the second, minimize the screen

<div class="wrapper">

    <div class="sidebar-wrapper">
   <div class="gr w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:280px;right:100;" id="mySidebar">
        <button class=" w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
        
           <div class="container">
              <div class="col">
              &nbsp;
              <div class="row">
            
                  <a class=" w3-hover-grayscale mx-auto d-block" href="http://globalr.net/site/"><img  src="assets/img/GR.png" width="130" height="50" ></a>
               
              </div>
              &nbsp;
              <div class="row ">
                <div class="col ">
                    <a href="#GENERAR" data-toggle="collapse">
                      <button type="button" class="btn btn-default j " ><img src="assets/img/menu1.png" width="20" height="20" > Herramientas de Gestion </button>
                    </a>

                    <div id="GENERAR" class="collapse">
                        <div class="btn-group-vertical btn-group-lg">
                            <button type="button" class="btn btn-default j">Crear Proyecto</button>
                            <button type="button" class="btn btn-default j">Modificar Proyecto</button>
                            <button type="button" class="btn btn-default j">Eliminar Proyecto</button>
                          </div>
                    </div>
                </div>  
              </div>
            </div>
          </div> 
      </div> 
    </div>
      
        <div  >
          <button class=" btn btn-outline-secondary w3-xlarge w3-left w3-hide-large" onclick="w3_open()"> <img src="assets/img/menu1.png" width="20" height="20" > </button>
          <nav class="navbar navbar-expand-sm bg-light navbar-light">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
            </nav>
        
        </div>   
  </div>
    
asked by Jesus Alfredo 22.08.2018 в 17:53
source

0 answers