CSS and JavaScript Nav Menu Collapse (No Bootstrap)

I have written a navbar code using pure HTML/SASS, but I am facing a challenge in adding a collapse element to the navigation bar.

Despite trying various solutions from Stack Overflow, I still haven't found one that works for me.

Therefore, I am reaching out for your valuable assistance.

This is my current code:

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

        }
    }
}

I am aiming to achieve a result similar to the image below:

Any assistance would be greatly appreciated!

javascripthtmljquerycss

Answer №1

Are you interested in using JavaScript for navigation?

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The 'slice' method is not accessible with the Kendo Grid Object

Attempting to connect the kendo grid to a WCF remote odata service is proving challenging. The grid fails to populate, throwing an exception Object doesn't support property or method 'slice'. Here's the javascript code used to initializ ...

jqueryajaxjsonkendo-ui

Restrict Recursive GraphQL Schema Query Depth with graphql-sequelize resolver in Node.js using express-graphql

In my code, I have two models called User and Post. My goal is to retrieve User information when querying a post, as well as obtain all of a User's posts when querying a user. These two models are associated in the following manner: User.hasMany(Pos ...

javascriptnode.jsgraphqlexpress-graphql

What is the best way to implement Redux within Next.js 13?

Currently, I am using Next JS 13 with Redux. In Next.js 12, I was able to wrap my entire application with Provider inside ./pages/_app. However, how can I achieve this in Next JS 13? Here is the code from my layout.js: import "../styles/globals.css&q ...

javascriptreactjsreduxnext.js

Floating hover box gracefully descends as you hover over it

While working on this particular site, I encountered an issue with the password being set as joint123. There was a map displayed with icons on the right side, and when hovering over the icons, the corresponding address would appear. However, the problem ar ...

htmlcsshover

Encountering difficulty importing TypeScript files dynamically within a Deno executable

When attempting to import a file from aws in an exe using its public link based on user input, I am facing difficulties For example, I generated my exe with the command below deno compile --allow-all main.ts Users execute this exe using commands like ./e ...

javascripttypescriptimportdeno

Tips for serializing a form using ajax for database storage in Laravel

Need help with saving multiple input fields to a database using AJAX. Here's the issue, I'm having trouble sending a serialized form to my database. When I serialize the form, attach it to a hidden input field using JQuery, and send it along wit ...

phpjqueryajaxlaravel

Utilizing attributes as scope properties within AngularJS

I am currently working on a directive and I need to pass the Attributes (Attrs) to the $scope, however, I am facing some difficulties in achieving this. Specifically, my goal is to assign attributes in my template based on the name set in my date-picker ta ...

javascriptangularjsangularjs-directive

Display DIV when the page loads, and hide it when any radio button is clicked

If you're looking to create a page with hidden content that is revealed when specific radio buttons are clicked, you've come to the right place. The concept is simple - the page starts off blank, but upon selecting a radio button, one div is show ...

htmlhidestartup

Update the numerical data within a td element using jQuery

Is there a way to use jquery to increase numerical values in a <td> element? I've attempted the following method without success. My goal is to update the value of the td cell by clicking a button with the ID "#increaseNum". Here is the HTML st ...

javascriptjqueryhtmlhtml-table

Displaying two dropdown menus with just a single coding component

Hey everyone, I'm having a problem with the dropdown list. I added an ASP dropdown list to a modal popup using a Bootstrap theme, but when the modal pops up, the dropdown list appears twice. Check out this image for reference: https://i.stack.imgur.co ...

htmlcssbootstrap-4bootstrap-modal

How can the color of the wishlist icon be modified in Reactjs when the item is available in the database?

Is there a way to change the color of the wishlist icon based on whether the item is in the database? If the item is present, its color should be brown, and if it's not present, the color should be black. Additionally, I want the ability to toggle be ...

javascriptcssreactjs

Error: The function .default.auth.signout is not recognized in the REACT and Firebase environment

I've come across several error questions on StackOverflow, but most remain unanswered. The ones that are answered don't seem to solve my issue. I need help debugging this particular error. In my REACT project using Firebase, I'm working on ...

javascriptreactjsfirebase-authentication

Improved method for transferring multiple form input values from a child to a parent window

I am working on a project where I have a child window containing multiple radio buttons. My goal is to send all the selected values from these radio buttons to the parent window. Currently, I am achieving this by creating a JavaScript string that contains ...

javascripthtml

What is the process for integrating Android Java code with Node.js code?

I have some code that I am trying to integrate with Node.js for Firebase notifications on my Android application. I found a blog post outlining the implementation here: The Node.js code listens to changes in my Firebase Database and triggers notifications ...

javascriptandroidnode.jsfirebasefirebase-notifications

Utilizing jQuery show() and hide() methods for form validation

I created a form to collect user details and attempted to validate it using the jQuery hide and show method. However, I seem to be making a mistake as the required functionality is not working correctly. What am I missing? I have searched for solutions on ...

javascriptjquery

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

Determine if the password is accurate using jQuery

Having some trouble with my login form. The JavaScript code always returns a false value, even when I'm entering the correct username and password. This is the jQuery code snippet: $(document).ready(function(){ var teamname = $("#teamname"); var te ...

phpjqueryformsauthenticationpasswords

Speaking about the `this` Vue component in an event listener context

Consider this Vue component that is equipped with a global event listener: let myApp = new Vue({ data: { foo: 0; }, methods: { handle: function(event) { this.foo = 1; // 'this' pertains to the handler, not ...

javascriptvue.jsvue-component

Tips for creating a mobile-responsive React + MUI component

A React component utilizing Material-UI (MUI) has been created and I am working on making it mobile responsive. The current appearance is as follows: https://i.stack.imgur.com/8z0T8.png My goal is to have it look like this: https://i.stack.imgur.com/L8g ...

javascriptreactjsmaterial-uiresponsive-designresponsive

Header Menu Click Causes Blurring of Website Background

I need help adding a blur effect to my site background only when the header menu is clicked and active. Once the menu is activated, the .ct-active class is added to it. The CSS code below works for styling individual items - the menu turns red when activ ...

cssmenuheaderblur