/ / Cómo combinar la barra superior y la barra de pestañas en Foundation 5 - zurb-foundation

Cómo combinar la barra superior y la barra de pestañas en Foundation 5 - zurb-foundation

¿Es posible combinar barra superior y barra de pestañas (fuera de la lona)?

Esta: introduzca la descripción de la imagen aquí

Se convierte en esto cuando se cambia el tamaño al tamaño móvil:

introduzca la descripción de la imagen aquí

Pero también quiero incluir la barra de pestañas (fuera del lienzo) para que quede así.

introduzca la descripción de la imagen aquí

No pude imaginar cómo podría hacerse esto yestaba intentando hacer mi icono de menú personalizado y colocarlo dentro de la barra superior, pero tuve problemas con la posición, los elementos desaparecieron, el margen / el relleno no funcionaron, la posición relativa afectó mi estilo aún más, así que pensé en preguntar aquí tal vez tienes mejor idea

Respuestas:

3 para la respuesta № 1

Hay 2 formas en que puede hacerlo, primero puede usar el preguntas de los medios o la otra forma es usar la clase de visibilidad. Por ejemplo, en el código de la barra superior, agregue class = "show-for-medium-up" que hará que la barra superior sea visible en pantallas medias y arriba, pero que se oculte en pequeño.

<nav class="top-bar show-for-medium-up" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">........................

A continuación, agregue el código para las offcanvas y agregue class = "hide-for-medium-up"

<div class="off-canvas-wrap hide-for-medium-up">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>

<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>

Al hacer esto, podrá implementar diferentes estilos dependiendo del tamaño de la pantalla. Para más información echa un vistazo a la clase de visibilidad


preguntas relacionadas


Comentarios (0)

Añadir un comentario