Emilia, parte de este equipo de trabajo, nos ha hecho el favor de escribir esta sección ya que conoce muy bien este tema.

Solución:

También tuve el mismo problema y la solución de @William S no funcionó para mí. SideNav no se mostrará correctamente si tiene una posición relativa. Lo hice funcionar poniendo SideNav y Content en un :

    

        Menu
    



    
        
            

                
                    
Item 1
                

            
        
    

    Content

Pequeña actualización: Tenga en cuenta que esta respuesta es para Angular Material 0.10.1. Como Angular Material aún es muy joven, es posible que esta solución no funcione para siempre o se vuelva redundante.

Para hacer que la barra superior se superponga con el sidenav, debe darle un índice z más alto que el sidenav (cualquier cosa por encima del índice z: 60 servirá)

HTML

  
    
      
Good luck overlapping me, sidenavs
    
  

CSS

.main-toolbar 
  /* Put top toolbar on a higher layer than sidenav, which has z-index: 60 */
  z-index: 61;

  /* Cosmetic */
  background-color: green;

Sin embargo, esto hará que la parte superior de la navegación lateral derecha se superponga, lo que podría no ser lo que desea.

Para hacer que sidenav aparezca debajo de la barra superior, debe cambiarlo de posicionamiento absoluto a relativo y cambiar el tipo de visualización a bloque.

Para esto, deberá anular algunos CSS del elemento sidenav y colocar el sidenav derecho dentro de un div que sigue a layout=”row”.

HTML

CSS

.md-sidenav-right 
  /* Cosmetic, show where the fill starts */
  background-color: pink;

  /* Override from absolute to relative */
  position: relative;

  /* Change to block display */
  display: block;

Aquí hay un codepen que utiliza los dos cambios anteriores. Código base tomado de la demostración de material angular, versión 0.10.1.

Valoraciones y comentarios

Puedes añadir valor a nuestro contenido colaborando tu experiencia en las críticas.

---

---

Utiliza Nuestro Buscador