Auto close Navbar when click on link (responsive mode)

web
mobile

Topic: Auto close Navbar when click on link (responsive mode)

Noksu Kaw asked 3 years ago

Hello On the navigation bar - responsive mode - when I click on a link (case linding page), the navigation bar does not close automatically !! Is there a way to close when I click on a link ?? Thank you.

Marta Szymanska staff pro premium answered 3 years ago

Hi, here is the code for this:
<script>
        $('.navbar-collapse a').click(function(){
            $(".navbar-collapse").collapse('hide');
        });
    </script>
Best, Marta

Mauricio Ortensi pro commented 3 years ago

Thank you so much Marta. It works perfectly for my. Best Regards.

İsa Sua ÖNAL commented 8 months ago

Thank you my friend. but, before closing a few seconds waiting. Can it close instantly?


Marta Szymanska staff pro premium commented 8 months ago

Hi,

I reproduces this script in the snippet here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1400438#html-tab-view but it seems that there is no problem with closing.

Best, Marta


Udis Klorenz commented 4 months ago

Hei thank you for the code. But I'm using the burger animation too and when I click on a link the nav closes but the animation is still the "x" and not the burger... how can I fix that?

Thank you


pawled pro premium commented 1 months ago

How to add this functionality also for navbar-brand and turn off for social buttons in menu (target="_blank")?


Grzegorz Bujański staff commented 1 months ago

Navbar-brand has no default elements that can be closed. Create a snippet with navbar in which you would like to add such functionality and tell what the problem is. I will try to help you


pawled pro premium commented 3 days ago

Simply I need navbar closing after click of any scrolling element (logo, navbar links, buttons).


Noksu Kaw answered 3 years ago

Thank you so mutch Marta ! # problem solved

If you want to use Typescript you can import the NavbarComponent from angular-bootstrap-md.

import { NavbarComponent as navmdb } from '../../../node_modules/angular-bootstrap-md/navbars/navbar.component';
export class YourComponent implements OnInit {
@ViewChild('navbarid')
private navbaridRef: navmdb;
onClick(event): void {
if (this.navbaridRef.shown) {
this.navbaridRef.toggle(event);
}
}

You will have full control on the object NavbarComponent (in my exemple rename to navmdb).
Of course in your html you need to reference the navbarid

<mdb-navbar #navbarid SideClass="navbar navbar-expand-sm navbar-dark fixed-top scrolling-navbar">

 


Sourabh Ambarshetti commented 4 weeks ago

iam facing issue in importing the angulat-bootsrtap-md navbar component error

Module not found: Error: Can't resolve '../../../../node_modules/angular-bootstrap-md/angular-bootstrap-md/navbars/navbar.component' any solution


nothingeni pro answered 5 months ago

I'm using MDB Angular and the previous answer is outdated since Angular 8.

This solution is currently working for me (01/2020).

HTML

  <mdb-navbar #navbarid SideClass="navbar navbar-expand-md navbar-dark sticky-top bg-light z-depth-0">
    ...
    <li class="nav-item">
        <a class="nav-link" (click)="onClick()">Link</a>"
    </li>
    ...

TS

import { NavbarComponent as navmdb } from '../../../node_modules/ng-uikit-pro-standard/lib/free/navbars/navbar.component';

@ViewChild('navbarid', {static: false}) navbaridRef: navmdb; //Get the NavbarComponent

... 
onClick() {
 this.navbaridRef.toggle(); //Hide the collapse menu after click
}

Marta Szymanska staff pro premium commented 5 months ago

Hi,

thank you for your solution.

Best, Marta


os853834 pro premium commented 2 months ago

I'm using the angular version as well. Is there an alternative to this relative reference to node_modules? It doesn't seem to have the correct reference

Module not found: Error: Can't resolve '../../../../node_modules/ng-uikit-pro-standard/lib/free/navbars/navbar.component' in ...


Sourabh Ambarshetti commented 4 weeks ago

Any solution for module not found: error


Grzegorz Bujański staff commented 4 weeks ago

Hi. If the problem occurs in MDB Angular, I suggest you create a new thread in the MDB Angular forum - they will be able to help.


Udis Klorenz answered 4 months ago

Hei thank you for the code. But I'm using the burger animation too and when I click on a link the nav closes but the animation is still the "x" and not the burger... how can I fix that?

Thank you


Marta Szymanska staff pro premium commented 4 months ago

Hi,

Do you also use the Angular version?

Best, Marta


Udis Klorenz commented 4 months ago

hiso i've these imports from this cdn version 4.14.0:

https://mdbootstrap.com/md-bootstrap-cdn/

thx


Marta Szymanska staff pro premium commented 4 months ago

Hi,

OK, but could you present your code in the snippet here: https://mdbootstrap.com/snippets/? Because I don't know where is the code which I can see and try to help you with fixing the bug.

Best, Marta


Udis Klorenz commented 4 months ago

https://mdbootstrap.com/snippets/jQuery/udis_klorenz/1864005

Thank you very much In the snippet you can see, that when the animation is done from burger to X, you can click on a link but after you clicked on the link the animation doesn't go back to the burger...


Marta Szymanska staff pro premium commented 4 months ago

Hi,

check your snippet now: https://mdbootstrap.com/snippets/jQuery/udis_klorenz/1864005. I think I found a solution for you.

Best, Marta


OKJOBS.bg answered 2 months ago

Hi Marta, I've tried your solution, it does not seem to work in my case. (or most probably I'm not able to make it work)

Could you please, take a look at my code and suggest what to do? Here is it:

            <!-- LOGO -->
            <div class="navbar-brand">
            <a class="navbar-brand-logo" href="https://okjobs.bg" title="Платформа: Обяви за Работа | Търся Работа | Подбор Персонал | OKJOBS&trade;">
                <img src="assets/images/logo.png" alt="Обяви за Работа | Търся Работа | Подбор Персонал | OKJOBS&trade;" width="155px">
            </a>
            </div>
            <button class="navbar-toggler" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#navbarNav" 
                    aria-controls="navbarNav" 
                    aria-expanded="false" 
                    aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-around" id="navbarNav">
                <ul class="navbar-nav menu-navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#top" title="Обяви за Работа | Търся Работа | Подбор Персонал | OKJOBS&trade;">
                            <p class="nav-link-number">01</p>
                            <p class="nav-link-menu">Начало</p>
                        </a>
                    </li>

Thanks in advance! Regards, Peter


OKJOBS.bg answered 2 months ago

Hi Marta, I've tried your solution one more time.

It Works like a Charm! Though you may not speak Bulgarian, you can still see how beautyful my site has becomq thanks to you: https://okjobs.bg

Thank you for sharing your knowledge. Regards, Peter


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No