Issue with Mobile NavBar remaining visible after clicking on target element in HTML CSS

On my website, everything works perfectly with the Nav bar except for when I am on mobile. When I click on any href from my Nav Bar, it directs me to the correct location but does not close the Nav Bar afterward. I need it to function this way: After clicking on a Nav Bar link, it should take me to the location and then automatically close the Nav Bar, so it does not obstruct the content I am trying to access. For reference, you can view this video example: https://youtu.be/BWffD2Lew8w

Can anyone provide guidance on how I can resolve this issue? Below is the code I have used for that section. Thank you!

<nav class="navbar fixed-top navbar-expand-lg navbar-dark d-md-inline d-lg-none" id="navbarFunctions" style="background-color: #0f0f0f;">
    <div class="container-fluid">
        <a class="navbar-brand" href="#Inicio"><img src="navbar/LogoWhite.svg" width="200" height="50"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarBtn" aria-controls="navbarBtn" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarBtn">
            <ul class="navbar-nav" style="font-size: 1.25rem;">
                <li class="nav-item mx-2">
                    <a class="nav-link" href="#Inicio">Inicio</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="#Beneficios">Beneficios</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="#Como_Funciona">¿Cómo funciona?</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="#Carta_Muestra">Carta Muestra</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="#Precios">Precios</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="#Contacto">Contacto</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
javascripthtmlcssnavbarnav

Answer №1

To ensure the menu closes when a link is clicked, remember to invoke the function that handles the menu closing event.

For instance:

<a class="nav-link" onclick="closeNavbar()" href="#Benefits">Benefits</a>

Implementing a similar approach will help maintain a seamless user experience.

Answer №2

To easily enable toggling on your navbar, simply include this toggler within each anchor tag:

data-toggle="collapse" data-target="#navbarBtn"

Here's an example:

<li class="nav-item mx-2">
   <a class="nav-link" href="#Precios" data-toggle="collapse" data-target="#navbarBtn">Precios</a>
</li>

Answer №3

Recently, I encountered a similar issue. I incorporated Bootstrap 4 into my project and included jQuery at the bottom of my HTML file, as is customary when using Bootstrap. I managed to resolve the issue using the following approach:

Firstly, link your JavaScript file in the HTML document:

<script src="assets/js/main.js" ></script>

Next, add the following code to your JavaScript file:

$(document).ready(function () {
    // Collapse the navbar when a link is clicked on smaller screens.
    $('.navbar-nav a').click(function(){
            $(".navbar-collapse").collapse('hide');
        });
});

I hope this solution works for you too!

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

Vue.js Components Facing Build Issues

I am currently experiencing a puzzling phenomenon. While working on my application components using Laravel Jetstream and Inertia Stack with VueJS, I encountered an issue where a newly created component in the same folder as others was not building. Neithe ...

javascriptvue.jslaravel-jetstream

Struggling to display a PHP success message using AJAX

So I have this code where I am trying to create a form in PHP and send a message. The message is being submitted successfully, but I am facing an issue when it comes to displaying a success message. The page submits the data but does not show any output. H ...

javascriptphpjqueryajax

The functionality of the Delete and Edit buttons has been disabled

As I am developing a CRUD (Create, Read, Update, Delete) application that involves managing a list of students and their grades, I have encountered issues while trying to implement the delete and edit functionalities on the front end. Specifically, I am st ...

jqueryhtmlbootstrap-4

Retrieving a designated set of attributes for elements chosen using an element selector

Is there a way to retrieve specific attributes for the first 10 <p> elements in a document using jQuery? I know I can easily get the first 10 elements with $('p').slice(0,10), but I only need certain attributes like innerText for each eleme ...

javascriptjquery

Steps for clearing input field with type=date in Protractor:

I am currently working with protractor version 4.0.4 and I'm encountering an issue where I cannot clear a date input field. It seems like Chrome is introducing some extra controls that are causing interference. You can find further details about Chro ...

javascriptangularjsselenium-webdriverprotractorselenium-chromedriver

show information retrieved from database according to the drop-down menu selection

Can anyone assist me with this query? I have a drop-down menu that includes "Shop A" and "Shop B". Shop A has a value of 1, and Shop B has a value of 2. When I select Shop A from the dropdown, I want to display the data from the database as a table specifi ...

javascriptphphtml-select

Creating and deploying a basic Angular2 application in cordova

I have a pre-existing app developed in Angular2, which is quite basic. Upon attempting to build it for Android using Cordova, the debug build successfully installs on the system but gets stuck at the loading stage. I am seeking guidance on how to ensure th ...

javascriptandroidcordovaangularloading

Display alternative text dynamically

Trying to gain a deeper understanding of state in react, this is a perfect example to me. When I say dynamic, I mean displaying the output below instantly as it is entered in the form. class Demo extends Component { constructor(props) { super ...

javascriptreactjsunicode

Is there a way to make the button text bold before deleting it post clicking on an alert message?

While testing my sequence in IE, I noticed that it appeared correctly, but in Chrome, the button text was not showing up as bold. Instead, only the alert message was displayed, and the button itself was removed. Upon further investigation using Chrome&apo ...

javascripthtmljquery

Using Three.js to import and cast rays on a .obj model created in Blender

I have successfully imported a 3D terrain using Blender and the OBJLoader in Three.js. In addition, I have created a mesh (highlighted in yellow in the image below) that I want to follow the mouse cursor while it hovers over the terrain. I have attempted t ...

javascriptthree.js

Is it possible to develop an image that can be zoomed in and out using the mouse

$(document.createElement('img')) .width(imgW) .height(imgH) .addClass('img_full') .attr('src', $(this).attr('data-src')) .draggable() .css({ &a ...

javascriptjquery

Is it possible to use combox to deactivate the buttons?

My goal is to deactivate the button as soon as I select a value from the drop-down list. For example, here's what I have: <select name =""> <option> disable </option> <option> enable </option> </select> <input ...

javascriptphpjqueryajax

How can you ensure a cohesive visual style throughout various Razor and HTML views?

In my ASP.Net MVC 5 application, I have a Layout.cshtml and HTML view page included. However, I want to maintain a consistent look and feel across multiple views in the application. I am aware that this can be achieved by using a Razor view page with the f ...

htmlangularjsrazor

Error encountered while using the getJSON code syntax

Is there an issue with this code snippet? I am receiving a syntax error on line 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <script src="http:/ ...

javascriptjquerygetjson

What strategies can be used to efficiently perform Asynchronous Operations on a high volume of rows in a particular database table?

I am looking to perform Asynchronous Operations on every row of a specific database table, which could potentially contain 500,000, 600,000, or even more rows. My initial approach was: router.get('/users', async (req, res) => { const users = ...

javascriptmysqlnode.jsmongodbexpress

Display a Three.js scene within a Vuetify.js component

Struggling to integrate a basic Three.js scene with the Vuetify v-app component? You're not alone. By using vue, vue-router, and three-js without Vuetify, I encountered no issues loading a simple 'Hello World' scene. If you're curious, ...

javascriptvue.jsvuejs2three.jsvuetify.js

Task: Choose MySQL option and Retrieve JSON data

I have a question regarding implementing a function in a separate module file and calling it within a route to retrieve query data: function getSobre() { return new Promise((resolve, reject) => { db.query(`SELECT * FROM sobre ORDER BY cod ...

javascripthtmlnode.jsexpress

Using JavaScript to transform radio buttons into checkboxes

I have a grouping of radio buttons and a checkbox displayed on the page as shown below <html> <head> <title>Languages</title> <script type="text/javascript"> </script> </head> <body> <spa ...

javascriptcheckboxradio-button

Error: The use of import statement is not allowed outside a module in JavaScript due to a Syntax

I'm just beginning my journey with React, starting from scratch without setting up all the necessary dependencies. Initially, I used CDNs in my html file but now I want to learn how to import React and ReactDOM into my local setup and also link CSS fi ...

javascripthtmlcssreactjsreact-dom

Modifying color scheme in ASP.NET web application's table

Although I'm not very familiar with this, I'll try to help out. I have an ASP.Net MVC web app in Visual Studio where one of my views, called View Details, contains a table that displays colors based on a specific scale. This scale consists of onl ...

htmlasp.net-mvccolorshtml-table