The link in the navbar isn't functioning properly, which indicates that it's not redirecting to the specified ID on this one-page application

   

 <!-- NAVBAR -->
<nav class="navbar navbar-expand-lg py-3 sticky-top navbar-light bg-white">
  <div class="container-fluid">
    <a class="navbar-brand" href="#acasa">
      <img class="logo" src="./assets/img/xxxxx_psiholog_logo.png" alt="xxxxxx">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-5">
        <li class="nav-item">
          <a class="nav-link"  href="#acasa" data-bs-toggle="collapse" data-bs-target="#navbarNav" >Acasa</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#servicii" data-bs-toggle="collapse" data-bs-target="#navbarNav">Servicii</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#despre-mine"data-bs-toggle="collapse" data-bs-target="#navbarNav">Despre mine</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#tarife">Tarife</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sedinte"data-bs-toggle="collapse" data-bs-target="#navbarNav">Sedinte</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#team"data-bs-toggle="collapse" data-bs-target="#navbarNav">Casete</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#blog"data-bs-toggle="collapse" data-bs-target="#navbarNav">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact"data-bs-toggle="collapse" data-bs-target="#navbarNav">Contact</a>
        </li>
      </ul>
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="tel:xxxxxxxxx" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span><i class="bi bi-telephone contact">&nbsp;xxx.xxx.xxx</i></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="mailto: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187b77766c797b6c587c79767c6d6a7a797b79366a77">[email protected]</a>" target="_blank" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span><i class="bi bi-envelope contact"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50333f3e24313324102828287e223f">[email protected]</a></i></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav><!-- //NAVBAR -->

The redirect functionality is functioning correctly after removing the "data-bs-toggle="collapse" data-bs-target="#navbarNav" part of the code. However, I require this code to ensure that the navigation bar collapses automatically when a link is clicked on mobile devices. I am developing using Angular and Bootstrap. Do you have any suggestions for making both functionalities work together smoothly?

jquerycssangularbootstrap-4

Answer №1

If you're using JavaScript, try coding a close button with JavaScript.

For example:

function openNav() {
    document.getElementById("button-id").style.width = "250px";
}

function closeNav() {
    document.getElementById("button-id").style.width = "0";
}

Alternatively, you can experiment with adding JavaScript framework code for Bootstrap.

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

Which option is more beneficial for intercepting API data in Angular 6: interfaces or classes?

My API returns JSON data that is not structured the way I need it, so I have to make changes. { "@odata.context":"xxxxxx", "id":"xxxxxxxx", "businessPhones":[ ], "displayName":"name", "givenName":"pseudo", "jobTitle":null, "ma ...

javascriptangulartypescriptclassinterface

How can we use Bootstrap to ensure that items in a div are aligned horizontally on larger devices and vertically on smaller devices?

I am currently working on creating a div that contains some information, similar to the layout used on the Coinbase website. However, I am encountering issues with styling as I want this div to be responsive - horizontally aligned on larger devices and ver ...

htmlcss

How can I retrieve specific URL parameters from the in-memory web API in Angular 2?

To retrieve data for a specific unit ID, I am using a parameter called "UnitID" in the following code: this.unitDetailsService.getUnitDetailsbyId(this.activeUnitId) I am utilizing the activeUnitId parameter to generate a URL for an in-memory service with ...

angularurlasp.net-web-apiin-memory

What is the best way to bypass TS1192 when incorporating @types/cleave.js into my Angular application?

Using cleave.js (^1.5.2) in my Angular 6 application, along with the @types/cleave.js package (^1.4.0), I encountered a strange issue. When I run ng build to compile the application, it fails and shows the following errors: ERROR in src/app/app.component. ...

javascriptangulartypescriptdefinitelytypedcleave

My goal is to retrieve and print the duplicated values only once from an associative array

Given an associative array, I need to print all the department names without any repetitions. <h3>2. List out all department names</h3> <div class="all"> </div> Here is my JavaScript code: var employee=[{"firstName":"Zahir","last ...

javascriptjqueryhtmlarraysobject

Creating dynamic attributes for hibernate mapping through front-end integration

Currently, I am facing the challenge of inserting JSON data into our database using a combination of Spring Boot, Hibernate, and Angular. The specific attribute name within this JSON data remains unknown during compile time. Is there a viable solution tha ...

jsonangularhibernatespring-bootorm

Is there a way to adjust the spacing between cards in Bootstrap?

I am attempting to replicate the layout shown in the attached picture. How can I adjust this property? Expected output: I would like the elements to be closer together and centered on the page, but I am struggling to achieve this. I have tried adjusting ...

htmlcssbootstrap-5

The Dilemma of Hover Effects in Internet Explorer 7

How can I make an image display another image with 4 absolutely positioned links when hovered over? The code currently works in Chrome, Firefox, Safari, and all versions of IE except IE7. Any suggestions for IE7 compatibility? For reference, here is the J ...

jqueryhtmlcssanimationinternet-explorer-7

Map / Area enveloped in darkness

I'm currently working on a map that includes an area, but I'd like to add a shadow effect around it. I'm struggling to figure out how to achieve this. <map name="map_bottom"> <area id="area_bottom" shape="poly" coords="0,0,0,37 ...

htmlcssdictionaryshadowarea

The image displays successfully on desktop, however, it fails to load once the website is deployed on GitHub or Netlify

While developing this website on my Mac, I encountered an issue where images load fine when I copy the project path from Atom to Chrome. However, once I push the same code to GitHub and then publish it on Netlify, the image fails to load. Does anyone kno ...

htmlcss

Guide on displaying partial views with multiple outlets in Angular2

As a newcomer to Angular2, I am interested in creating a basic CRUD operation while incorporating routing concepts into my project. Fortunately, I am using Visual Studio 2015 which provides all the necessary configurations for me. My goal is to display one ...

angularangular2-routingangular2-templateangular2-directives

Using an image link in CodeIgniter will not function properly

Could someone please clarify why this particular code is not functioning properly in CodeIgniter? .linkBack{ background-image:url('/myBlog/CodeIgniter_1.7.2/pictures/arrow.gif'); display:block; height:58px; width:105px; text-indent:-999px ...

phpcsscodeigniterimage

The text for the Google chart is nowhere to be found

After creating a test project using the Google Chart example, I noticed that some text from the chart is missing after adding CSS. Here is the CSS code I used: html, body { font-size: 100%; height: 100%; width: 100%; } body { background: ...

javascripthtmlcssgoogle-visualization

Is Inline Styling the Key to Effective MVC Client-Side Validation?

Having some trouble with my form's client-side validation. I'm using data annotations and models, but the default display is not visually appealing. I've tried applying CSS, but getting tooltip style errors has been a challenge. What I real ...

cssmodel-view-controllervalidation

How to create a navigation search bar using HTML/CSS or Bootstrap

Seeking advice on how to recreate this UI layout. Does anyone have suggestions or know of any helpful resources? I am particularly struggling with linking the search bar to the navbar. https://i.sstatic.net/PMI2w.png ...

htmlcsstwitter-bootstrap

Mastering the Art of Manipulating Z-Index Stacking Context in CSS Using Transforms

I'm struggling to position the red square on top of the table. After reading articles about Z-index Stacking Context and browsing through this stack overflow page about overriding CSS Z-Index Stacking Context, I still can't seem to figure it out. ...

htmlcss

Import data from an external JSON file

I'm having trouble retrieving JSON data from an external file. Oddly enough, it works perfectly when I include the JSON inline. However, after creating a file named test.json and transferring the JSON content into it, I can't seem to access the i ...

javascriptjqueryjson

Need assistance with passing a model and a string in MVC5?

Below is the code snippet I am working with: JavaScript: $(document).ready(function () { //Thing is model var things = [ { id: 1, color: 'yellow' }, { id: 2, color: 'blue' }, { id: 3, color: 'red&a ...

jqueryajaxasp.net-mvcc#-4.0

Leveraging sessions within the CSS Declaration

Struggling to pass the css file name to my razor page through session. Here's what I've got: Current line of code: <link href="@Url.Content("~/Content/epp.css")" rel="stylesheet" type="text/css" /> Trying to pass 'epp' as a Ses ...

c#cssasp.net-mvcrazor

Begin an unnumbered hierarchical list commencing at 1.2.1

I am trying to create a nested unordered list with specific numbering. My goal is for the list to start at "1.2.1, 1.2.2, etc." Please refer to the attached fiddle for reference. The desired outcome is shown in the following image: https://i.stack.imgur ...

htmlcss