0
610
VistasBarra de navegación receptiva como StackOverflow
Estoy tratando de crear una barra de navegación receptiva, similar a la de Stack Overflow. He adjuntado una imagen del diseño que estoy tratando de lograr. 
Para simplificar, agregué algunos valores para que sea más fácil de seguir. Está el div externo que encapsula toda la página, outer-wrapper y el div principal que encapsula el contenido principal (barra de navegación, contenido principal y pie de página), main-wrapper .
Ahora suponga que outer-wrapper tiene 1000 px de ancho y main-wrapper tiene 800 px de ancho, luego hay 100 px de búfer en el lado izquierdo y derecho. Cuando la ventana se reduce, quiero que el búfer se agote antes de que cambie cualquiera de los contenidos principales.
CSS
.outer-wrapper { width: 100%; } .main-wrapper { width: 800px; display: flex; flex-direction: column; margin-left: auto; margin-right: auto; position: relative; } .nav-home { position: fixed; top: -30px; left: -30px; height: 60px; width: 100%; padding: 20px 20px 0px 20px; display: flex; justify-content: space-around; } }HTML
<div class='outer-wrapper'> <div class='main-wrapper'> <div class='nav-bar'>...</div> <div class='main-content'>...</div> <div class='footer'>...</div> </div> </div> El problema es que cuando la ventana se reduce para coincidir con el ancho del main-wrapper a 800 px, todavía hay un margen izquierdo y derecho en la barra de navegación. ¿Cómo me aseguro de que el ancho de la barra de navegación coincida con el ancho del contenido principal y el pie de página cuando el margen izquierdo y derecho se reduce a 0?
Gracias.
2 Respuestas
Responde la pregunta0
Eliminé algunos de sus estilos de la clase .nav-bar y parece estar funcionando como lo requiere. ¿Me estoy perdiendo algo?
He agregado colores para ayudar a visualizar el cambio de tamaño.
.outer-wrapper { background-color: yellow; width: 100%; } .main-wrapper { background-color: blue; width: 800px; display: flex; flex-direction: column; margin-left: auto; margin-right: auto; position: relative; } .nav-bar { background-color: red; justify-content: space-around; } .main-content { background-color: green; } .footer { background-color: purple; } <div class='outer-wrapper'> <div class='main-wrapper'> <div class='nav-bar'>Nav Bar</div> <div class='main-content'>Main Content</div> <div class='footer'>Footer</div> </div> </div>0
.outer-wrapper { width: 100%; } .main-wrapper { width: 800px; display: flex; flex-flow: row wrap; font-weight: bold; text-align: center; margin: 0 auto; } .main-wrapper > * { padding: 10px; flex: 1 100%; } .nav-bar { background: tomato; } .footer { background: lightgreen; } .main-content { background: deepskyblue; } .aside-1 { background: gold; } .aside-2 { background: hotpink; } @media all and (min-width: 600px) { .aside { flex: 1 0 0; } } @media all and (min-width: 800px) { .main-content { flex: 3 0px; } .aside-1 { order: 1; } .main-content { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } } body { padding: 2em; } <div class="outer-wrapper"> <div class="main-wrapper"> <nav class="nav-bar">Navbar</nav> <main class="main-content">content</main> <aside class="aside aside-1">aside 1</aside> <aside class="aside aside-2">aside 2</aside> <footer class="footer">footer</footer> </div> </div>este es el código que hice, espero que te ayude y lo que esperas