How can we ensure that the entire BS4 Navbar (on smaller screens) is clickable, allowing users to show/hide the submenu by touching anywhere within the area?

https://i.sstatic.net/03po7.png

My goal is to make the entire navbar area touchable, rather than just having a button. I believe this can be achieved by adjusting the default Bootstrap 4 navbar settings:

HTML:

<nav id="menu-navbar" class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
        aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>    
        <a class="navbar-brand" href="#">{{site.title}}</a>
        <div class="collapse navbar-collapse" id="navbarToggler">
            <div class="navbar-nav float-right text-right pr-3">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="purgatorio-anim.html">Animación</a>
                <a class="nav-item nav-link" href="purgatorio-inter.html">Interacción</a>
                <a class="nav-item nav-link" href="purgatorio-blog.html">Textual/Blog</a>
                <a class="nav-item nav-link" href="acerca.html">Acerca</a>
                <a class="nav-item nav-link" href="contacto.html">Contacto</a>
            </div>
        </div>
</nav>
javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To handle this situation, you can set up a listener for the click event on the navbar. If the button is visible (meaning that the navbar is collapsed), you can use this event to toggle the collapsible element within the navbar. Here's an example:

$(document).ready(function()
{
    $("#menu-navbar").on("click", () =>
    {
        // Locate the toggler button.
        
        var tBtn = $(this).find(".navbar-toggler");

        // Check if the button is visible (indicating that the navbar is collapsed). If so,
        // toggle the collapsible element.

        if (tBtn.is(":visible"))
           $(this).find(".collapse").collapse("toggle");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<nav id="menu-navbar" class="navbar navbar-expand-lg navbar-light bg-light">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#">NAVBAR</a>

  <div class="collapse navbar-collapse" id="navbarToggler">
    <div class="navbar-nav float-right text-right pr-3">
      <a class="nav-item nav-link active" href="#">
        Home <span class="sr-only">(current)</span>
      </a>
      <a class="nav-item nav-link" href="purgatorio-anim.html">
        Animation
      </a>
      <a class="nav-item nav-link" href="purgatorio-inter.html">
        Interaction
      </a>
      <a class="nav-item nav-link" href="purgatorio-blog.html">
        Textual/Blog
      </a>
      <a class="nav-item nav-link" href="about.html">
        About
      </a>
      <a class="nav-item nav-link" href="contact.html">
        Contact
      </a>
    </div>
  </div>

</nav>

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

Having difficulty accessing the sound file despite inputting the correct path. Attempts to open it using ./ , ../ , and ../../ were unsuccessful

While attempting to create a blackjack game, I encountered an issue. When I click the hit button, a king card picture should appear along with a sound. However, the sound does not play and the error message Failed to load resource: net::ERR_FILE_NOT_FOUND ...

javascriptpath

Tips for sending AngularJS expressions to a controller

I am looking to pass a value from an AngularJS Expression to the controller. Here is the HTML code : <div data-ng-controller="AlbumCtrl"> <div data-ng-repeat="z in songInfo"> <div data-ng-repeat="b in z.album& ...

javascriptangularjs

Divide Footer Information into Two Sections: Left and Right

<footer> <div class="copyrights-left"> <p>&copy 2015. <a style="color: #fff;" href="index.html">Free Xbox Live Gold Membership and Free Xbox Live Gold Codes</a>. All rights reserved.</p></div> <div class="co ...

htmlcss

The captivating logo animation of Google Chrome

For optimal viewing experience, it is recommended to use Chrome or any WebKit browser. https://www.google.com/intl/en/chrome/browser/ Hovering over the chrome logo reveals an amazing effect. I tried downloading the page source, but got lost in it. The s ...

javascriptjquerycsswebkit

Using Selenium and Java to retrieve population data from en.wikipedia.org for countries

I am attempting to retrieve the population data from a specific element. I have attempted to use the parent method, but encountered an error. My goal is to extract the population information for China from the table on this page: https://en.wikipedia.org/ ...

javascriptjavaselenium-webdriverxpathwebdriverwait

Positioning Bug in FF/IE with Absolute Placement

It appears that Chrome is the only browser displaying my code correctly. While testing in Firefox and Internet Explorer, I have noticed that my position:absolute is being affected by the border size, unlike in Chrome where it remains unaffected (which is ...

htmlcss

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

javascriptjqueryhtmlcss

Guide on presenting mysql results in a more visually appealing way by displaying them in 3 separate table columns instead of

HELP NEEDED: I have been searching for a solution to my problem extensively, both here on StackOverflow and through Google. However, none of the suggested posts or examples seem to address my specific issue. As a beginner, I am struggling to adapt the solu ...

phphtmlmysql

Attaching identical class and event handlers to numerous dynamically created elements

I am facing a challenge with the following HTML structure: <a href="#" @click.prevent="toggleClass">Show/Hide</a><br> <li :class="{myClass: showItems}">Item 1</li> <a href="#" @click.prevent="toggleClass">Show/Hide< ...

javascriptvue.js

Issue with opening mobile app from deep link in HTML email

My HTML form contains a deeplink that is submitted through the SendGrid API on nodeJS. After sending the email, users can view it but are unable to click on the deeplink. <!DOCTYPE html> <html> <head> ...

htmlnode.jsemailsendgriddeep-linking

Struggling with jQuery fadeIn and fadeOut in IE8?

I am struggling to understand why my fadeIn, fadeOut, and corner() functions are not working in IE8 on my website at . They were functioning properly before, but now they seem to be broken. Can anyone pinpoint the issue causing this problem? If you click ...

javascriptjqueryajaxinternet-explorer-8fadein

Ways to Retrieve JavaScript Variable inside HTML Tags in a JSP

I am currently facing a requirement where I must assign js variables to html input tag ids. For example: <input type='text' id='(here I need js variable)'/> I am aware that one way to achieve this is by creating the entire elem ...

javascripthtmljsp

Create a loop in Vue.js 3 without the need for a query

Can someone help me understand how to fetch data using a loop in Vue.js version 3 when working with queries? I am trying to retrieve an object based on its id, which is obtained from the URL. However, I seem to be facing some difficulties. Any guidance wou ...

javascriptarraysloopsvue.js

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

css

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

javascriptphpjqueryhtmlajax

Ensure that only numerical values in decimal form are permitted when entering data in Angular

How can I restrict user input to only decimal values? Here is the HTML code for my input field: <label for="conversion-factor">Conversion Factor:</label> <input type="text" class="form-control form-control-sm" id="conversion-factor" ...

javascripthtmlangulartypescript

Newbie Inquiry Renewed: What is the best way to convert this into a functional hyperlink that maintains the data received from the ID tag?

I have no prior training etc. If you are not willing to help, please refrain from responding as I am simply trying to learn here. <a id="player-web-Link">View in Depth Stats</a> This code snippet loads the following image: https://i.stack.i ...

javascriptjqueryhtmljson

Concealing a Parent Container Using jQuery

I've been attempting to hide a certain div with a value of 9, but my current method doesn't seem to be working... The Hide Function I'm Using: <script> $('.hhpt-housebox').each(function() { if($(this).val() < 9 ...

htmljquery

The best way to close a swipeable drawer from a different class

I'm feeling a bit puzzled by the explanation of SwipeableDrawer on the Material-ui website. Here's the setup I have: there's a Component called 'Sidebar' that opens a SwipeableDrawer when a user clicks a button on the appbar or swi ...

javascriptreactjsmaterial-uireact-propsreact-state

Display elements exclusively when the class XY is in an active state using JavaScript

Hello everyone, I'm new to this platform and excited to share my first post. Currently, I find myself facing a major challenge as I navigate through a bootcamp program. I have been working on a website with different sections that require specific fu ...

javascripthtmlcss