Question

0

100

Views

CSS + Javascript Navbar Collapse (No bootstrap)

So I have written this navbar code with pure HTML/SASS and am now kinda facing a roadblock to add a collapse element to the navigation.

I have tried several answers here on stack but still couldn't find one that gets me going..

Therefore I have decided to ask for your valuable help.

So this is what I have now:

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
                }
            }

        }
    }
}

The result I am trying to obtain is something like in the image below:

any help will be much appreciated!

almost 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-09-30T14:01:11.055Z

Would you want to use 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>

0

100

CSS + Javascript Navbar Collapse (No bootstrap)

1 answers

0

Find remote jobs

Andres GPT