Auto close Navbar when click on link (responsive mode)


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 12 months ago

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


Marta Szymanska staff pro premium commented 12 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 8 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 5 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 5 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 4 months 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 5 months 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 9 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 9 months ago

Hi,

thank you for your solution.

Best, Marta


os853834 pro premium commented 6 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 5 months ago

Any solution for module not found: error


Grzegorz Bujański staff commented 5 months 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 8 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 8 months ago

Hi,

Do you also use the Angular version?

Best, Marta


Udis Klorenz commented 8 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 8 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 8 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 7 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 6 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 6 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


Hi Martha. I tried every solution listed on this page but in my case it is not working. I am including a simplified version of my code here. Please advice. This is what I have in my main.js:

$('.navbar-collapse a').click(function(){ $(".navbar-collapse").collapse('hide'); });

This is what I have in my main.css

html { scroll-behavior: smooth; margin-bottom: 0px; }

a:link{
text-decoration: none;
color: #F7F3F3;
}
a:visited{      
    text-decoration:none;
    color: #F9F3F3;
}
a:hover{
    text-decoration: none;
    color: #88DDEF;
}
a:active{
text-decoration: none;
color: #08102A; 
}

body { padding: 0; background-color: #819BD6; font-family: 'actor', serif; font-size: 16px; color: #08102A; text-decoration: none; } p { margin-right: 0; margin-bottom: 1em; margin-top: 0px; } input#mobile_menu { display: none; } input#mobile_menu:checked + nav { right: 0px; text-transform: uppercase; } input#mobile_menu:checked + nav label { background-image: url(images/menu_close.svg); } nav { width: 320px; background-color: #474444; padding: 20px 20px 30px 25px; color: #C8C8C8; box-sizing: border-box; position: fixed; z-index:99; top: 0px; right: -320px; transition: all .5s ease; } nav a { color: #020519; text-decoration: none; display: block; margin: 0; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.1); } nav a:first-of-type { border-top: none; } nav label { cursor: pointer; display: block; width: 42px; height: 42px; background: url(images/menu_open.svg) no-repeat center center; background-size: 22px auto; position: absolute; background-color: #474444; top: 0px; left: -42px; border-radius: 14px 0px 0px 14px; } .menuEnMain { } .maintop { background-color: #B9B9B9; padding-bottom: 28px; display: block; position: absolute; } .mainBottom { font-family: Arial, Helvetica, sans-serif; background-color: #819BD6; font-size: medium; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;

} .quienessomosTop { font-family: Arial, Helvetica, sans-serif; color: #FFF; background-color: #298ecb; font-size: medium; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .quehacemosTop { font-family: Arial, Helvetica, sans-serif; color: #FFF; background-color: #263947; font-size: medium; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .inversionesTop { font-family: Arial, Helvetica, sans-serif; color: #FFF; background-color: #c3b7a7; font-size: medium; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .hmexTop { font-family: Arial, Helvetica, sans-serif; color: #FFF; background-color: #de7d2a; font-size: medium; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }

.husaTop { font-family: Arial, Helvetica, sans-serif; color: #FFF; background-color: #afac43; font-size: medium; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }

.gridContainer { margin-left: auto; margin-right: auto; width: 100%; padding-left: 0%; padding-right: 0%; background-color: #FFF; padding-top: 0; padding-bottom: 0; } .menuEnMain { } .zeroMargin_desktop { margin-left: 0; } .hide_desktop { display: none; } .zeroMargin_mobile { margin-left: 0; } .hide_mobile { display: none; }

This is what I have in my HTML:

<html lang="eu">

- Principal - Quienes Somos - Que Hacemos       > Inversiones en Bienes Raices       > Hipotecarios Mexico       > Hipotecarios USA
BNC Investments
body {margin:0;} Hipotecarios Mexico Inversiones en Bienes Raices Hipotecarios USA

Casa

</div>
<div class="quienessomosTop" id="quienessomos">
       <img src="images/quienessomos4.jpg" alt="quienessomos" width="100%"/> 
     <div class="abajoQuienessomos">
         <div class="abajoCasa">
         <p>Quienes somos</p>    
     </div>
     </div>
</div>
<div class="quehacemosTop" id="quehacemos">
  <img src="images/quehacemos4.jpg" alt="BNC Investments" width="100%"/>
     <div class="abajoQuehacemos">  
         <p>Que hacemos</p>  
     </div>
</div>
<div class="inversionesTop" id="inversiones">
          <img src="images/inversiones4.jpg" alt="Inversiones" width="100%"/>
     <div class="abajoInversiones">
         <p>Inversiones en Bienes Raices</p>     
     </div>
</div>
<div class="hmexTop" id="hmex">
          <img src="images/hmex4.jpg" alt="Hipotecarios México" width="100%"/>
     <div class="abajoHmex">
         <p>Hipotecario México</p>   
     </div>
</div>
<div class="husaTop" id="husa">

Hipotecarios USA



Tomek Makowski staff commented 2 months ago

Hi could you reopen your problem in the snippet code editor.

Link to snippet code editor: https://mdbootstrap.com/snippets/

Regards


Please insert min. 20 characters.
Status

Answered

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