To close the responsive menu, simply click anywhere outside of the navigation bar

My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code:

<!-- Navigation -->

<nav id="navigation-sticky" class="white-nav b-shadow">

    <!-- Navigation Inner -->

    <div class="nav-inner">

        <div class="logo">

            <!-- Navigation Logo Link -->

            <a href="#home" class="scroll">

                <!-- Your Logo -->

                <img src="" class="site_logo" alt=""/><br>

               </a>

        </div>

        <!-- Mobile Menu Button -->

        <a  class="mobile-nav-button colored"><i class="fa fa-bars"></i></a>

        <!-- Navigation Menu -->

        <div class="nav-menu clearfix ">

            <ul class="nav uppercase oswald">

                <li><a href="#home" class="scroll">home</a></li>

                <li class="dropdown-toggle nav-toggle" ><span href="#about" class="scroll">About App<b data-toggle="dropdown"></b></span>

                    <!-- DropDown Menu -->

                    <ul class="dropdown-menu uppercase gray-border clearfix">                       

                        <li><a href="#works" class="scroll">HOW DOES IT WORK?</a></li>
                        <li><a href="#features" class="scroll">Features</a></li>                        
                        <li><a href="#what-we-do" class="scroll">APP FLOW</a></li>
                        <li><a href="#faq" class="scroll">F.A.Q</a></li>

                    </ul>

                    <!-- End DropDown Menu -->

                </li>



                <li><a href="#portfolio" class="scroll">Service Types</a></li>

                <li><a href="#skills" class="scroll">Cities</a></li>

                <li><a href="#prices" class="scroll">Rates</a>

                </li>

                <li><a href="#download" class="scroll">Download</a></li>



                <li class="dropdown-toggle nav-toggle" ><span aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle scroll">Become a Driver</span>

                    <!-- DropDown Menu -->

                    <ul class="dropdown-menu uppercase gray-border clearfix">                       

                        <li><a href="#" class="scroll">Signup</a></li>
                        <li><a href="#" class="scroll">Flyer</a></li>                       


                    </ul>

                    <!-- End DropDown Menu -->

                </li>

                                    <li><a href="#" class="scroll">login</a></li>

                <li><a href="#contact" class="scroll">contact</a></li>

            </ul>

        </div><!-- End Navigation Menu -->

    </div><!-- End Navigation Inner -->

</nav><!-- End Navigation -->

Although the script I'm using successfully closes the menu, I'm encountering an issue where double-clicking is required instead of single-clicking to open the menu.

$('html').click(function() {
 $('#menu').hide(); 
});
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Here is a possible solution for you:

$(document).mouseup(function (e)
{
    var container = $(".nav-menu");

    if (!container.is(e.target) // check if the click target is not the container
        && container.has(e.target).length === 0) // check if the click target is not a descendant of the container
    {
        container.css("display","none"); // hide the container
    }
});

Update: Give this a try instead

var container = $(".nav-inner div.nav-menu, .mobile-nav-button");

if (!container.is(e.target) // check if the click target is not the container...
    && container.has(e.target).length === 0) // ...or a descendant of the container
{
    $(".nav-inner div.nav-menu").slideUp(); // slide up the menu
}

Answer №2

Here is the solution you've been searching for:

$('body').click(function() {
//Hide the menu if it's visible
});

$('#menuwrapper').click(function(event){
    event.stopPropagation();
});

Answer №3

You can give this a shot: 

$( "#menu" ).toggle( "slide" );

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

What criteria should I use to determine if a post has been favorited by a user using Mongoose?

Creating a function for users to like posts has been my recent project. Each post is stored as an object in my MongoDB collection with a specific schema. { title: String, text: String } On the other hand, users have their own unique schema as well. ...

javascriptnode.jsmongodbdatabase-designmongoose

Once the timer has finished, I would like for a specific component to be displayed

I am trying to make my component CountDownSquare disappear once the timer has fully counted down. In my homePageData, I have the main text stored in a h3 element that should only appear once the countdown is complete. I attempted to use a ternary stateme ...

javascriptreactjs

Struggling with incorporating a Carousel feature while navigating through an array

I am struggling to properly implement a carousel using the data from my Videos Array. Instead of getting the desired output where videos should slide one by one, all the videos in the Array are being rendered at the same time. <div id="carouselEx ...

htmlcssreactjscarouselbootstrap-5

Material Angular table fails to sort columns with object values

Currently, I am in the process of developing a web application using Angular Material. One of the challenges I have encountered is displaying a table with sorting functionality. While sorting works perfectly fine on all columns except one specific column. ...

javascripthtmlangulartypescriptangular-material

Upon utilizing JSON.parse in Express, an unexpected token < in JSON was encountered at position 0 while attempting a client side fetch POST

I'm trying to send a basic object through a fetch request to my express server, but I keep encountering an error when attempting to log it. Currently, if I log req.body (with the header 'Content-Type': 'application/x-www-form-urlencode ...

javascriptnode.jsjsonexpressfetch

Centralized navigation bar

I am currently facing a challenge with centering my nav bar and I'm not sure how to proceed. The nav bar is placed within a class and a div, which is causing confusion for me. I have attempted to align it to the center and also tried using float:cente ...

htmlcss

Tips for swapping out textures imported from Collada with ShaderMaterial textures in Three.js

Is it possible to update the textures of a basic 3D model loaded using the Collada loader in the Three.js library? My goal is to incorporate color, specular, and normal maps onto the model using ShaderMaterial by referencing new files with the model' ...

javascriptwebglthree.jscollada

Creating two columns using React and Material-UI Grid while utilizing just one map function for iteration

I am facing a challenge with Material-UI Grid. I want to display the information from my map function in two columns instead of one. I tried adding another Grid item sm={6} and using the same map function, which resulted in two columns but with identical i ...

cssreactjsdictionarymaterial-uigrid

Ensuring accurate Joomla language on Ajax external file

I am currently working on a customized code within a Joomla-based website that utilizes jQuery Ajax. One challenge I have encountered is incorporating Joomla language variables due to the multilanguage nature of the site. Unfortunately, it appears that th ...

jqueryajaxjoomla

Altering the color scheme of a specific column within a stacked bar chart using C3.js

I'm currently facing a challenge with highlighting specific values in a c3.js stacked bar chart. While I was able to change the color of an individual bar in a non-stacked bar following this example, I'm struggling to determine how to identify th ...

javascriptcssc3.js

Is there an issue with loading Vue list rendering due to Axios not returning the data?

Utilize the axios request api interface to fetch data and populate a list, but encounter a problem when trying to iterate through the properties of an object using v-for. Take a look at the javascript snippet below: var vm = new Vue({ el: '# ...

javascriptvue.js

Conceal additional recipients in the "to" address field when sending emails with Node.js using Nodemailer

I am currently working on a project called EmailSender using node.js, and I have found that the nodemailer package is incredibly helpful. However, when sending emails to multiple contacts, all recipients are able to see each other's email addresses i ...

javascriptnode.jsexpressnodemailer

Is it obligatory to reply with status code 200 in Express?

Is it required to explicitly include a status 200 code in the response or is it set automatically? response.json({ status: 'OK', }); vs. response .status(200) .json({ status: 'OK', }); Upon testing the route in my browser, ...

javascriptnode.jshttpexpressserver

What is the purpose of using the http module to specify the port when the app.listen function already sets the

var express = require("express"); var app = express(); // This code sets the port to 8080 by default, or else it will use the environment-specific port. app.set('port', process.env.PORT || 8080); app.get('/', function(req, res){ r ...

javascriptnode.jshttpexpressserver

Convert HTML style text annotations into a collection of dictionaries

Currently facing the following issue: Suppose I have a string "<a>annotated <b>piece</b></a> of <c>text</c>" To create a list with the desired result as [{"annotated": ["a"]}, {"piece": ["a", "b"]}, {"of": []}, {"te ...

pythonhtmlparsinghtml-parsingnlp

No adjustment in color upon switching themes

I've been struggling to achieve the desired outcome while working on a small coding task. The goal is to modify the color of the screen background, text, and button as illustrated in the uploaded image. I have three code files for this task - index, t ...

cssreactjs

Eliminate repeat entries in MongoDB database

Within our MongoDB collection, we have identified duplicate revisions pertaining to the same transaction. Our goal is to clean up this collection by retaining only the most recent revision for each transaction. I have devised a script that successfully re ...

javascripttypescriptmongodb

Are you experiencing empty boxes instead of Glyphicons in Bootstrap 3?

Having some trouble using Glyphicons with Bootstrap 3. I've noticed that a few of them aren't displaying properly. For instance, when trying to use these three glyphicons, the first one doesn't seem to show up correctly (appears as an empty ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

Using Strapi and Next.js to retrieve user information

After searching for similar questions with no luck, I'm reaching out for help. Building an authentication system using Strapi and Next.js, I'm faced with a task that seems simple but eludes me. The main question is: How can the client retrieve u ...

javascriptnext.jsstrapi

What is the reason for the Pointer Lock API entry displaying a significant number when the window is compressed?

Take a look at these two screenshots that illustrate the issue: The first screenshot demonstrates the correct behavior - the fullscreen mode works perfectly. However, in the second screenshot, a problem arises. Depending on the size of the browser window, ...

javascripthtmlthree.js