0
103
ViewsCSS + Javascript Navbar Collapse (sin arranque)
Así que escribí este código de la barra de navegación con HTML/SASS puro y ahora me enfrento a un obstáculo para agregar un elemento de colapso a la navegación.
Intenté varias respuestas aquí en la pila, pero aún no pude encontrar una que me pusiera en marcha.
Por ello he decidido solicitar su valiosa ayuda.
Así que esto es lo que tengo ahora:
html/php
<!-- NAVBAR -->
<div class="navbar-wrapper">
<!-- SITE LOGO -->
<div class="site-branding">
<a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><img class="logo" src="<?php echo get_template_directory_uri(); ?>/assets/img/logo-white.png" alt="<?php bloginfo('name'); ?>" /></a>
</div>
<!-- END SITE LOGO -->
<!-- SITE NAV -->
<nav id="site-navigation" class="main-navigation">
<?php
// Header Menu - > Defined in functions.php
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu_id' => 'header-nav',
)
);
?>
</nav>
<!-- END SITE NAV -->
</div>
<!-- END NAVBAR -->
SCSS
.navbar-wrapper {
@include flex(center);
flex-direction: row;
width: 100%;
padding: 8.6rem 0 8.6rem;
.site-branding {
flex-grow: 1;
}
#site-navigation {
#header-nav {
@include flex(center);
list-style: none;
margin: 0;
padding: 0;
li>a {
text-decoration: none;
cursor: pointer;
letter-spacing: 0.014rem;
padding: 0 2rem;
color: $white;
font-size: 1.8rem;
font-family: $subtitle-font;
&:hover {
color: $color-primary
}
}
}
}
}
El resultado que estoy tratando de obtener es algo como en la imagen de abajo:
¡Cualquier ayuda será muy apreciada!
·
Santiago Trujillo
1 answers
Answer question0
¿Te gustaría usar JS?
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
·
Santiago Trujillo
Report
Answer question