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

Noksu Kaw free asked 6 years ago


HelloOn 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.


Lucky Jeremiah free commented 2 years ago

Thank you soooooooooo muccchhhhh!!! Can i get you a drink please?


PavelVe pro answered 1 year ago


Hello, I have a problem with the sidebar too. If I set in js showCloseButton: true I can see the close button and it works. If I copy it button and paste it, it does not work as it should have. My problem is, that I want to have a link for scrolling by the website according to id (# Kontakt). On click, it scrolls, but does not close the sidebar. Can you help me? You can check it there. https://mdbootstrap.com/snippets/jquery/pavelve/3855045


Marcin Luczak staff commented 1 year ago

Hi,

Your snippet has not been deployed. Please publish it so I can better understand your issue.

Keep coding, Marcin


manuelandrade3 free answered 3 years ago


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 3 years ago

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

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

Regards


OKJOBS.bg free answered 3 years 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


OKJOBS.bg free answered 3 years 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


Udis Klorenz free answered 4 years 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 Wierzbicka staff commented 4 years ago

Hi,

Do you also use the Angular version?

Best, Marta


Udis Klorenz free commented 4 years ago

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

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

thx


Marta Wierzbicka staff commented 4 years 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 free commented 4 years 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 Wierzbicka staff commented 4 years ago

Hi,

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

Best, Marta


nothingeni free answered 4 years 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 Wierzbicka staff commented 4 years ago

Hi,

thank you for your solution.

Best, Marta


os853834 free commented 3 years 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 free commented 3 years ago

Any solution for module not found: error


Grzegorz Bujański staff commented 3 years 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.


Jean-Marc Comby free answered 6 years ago


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 free commented 3 years 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


Noksu Kaw free answered 6 years ago


Thank you so mutch Marta ! # problem solved

Marta Wierzbicka staff answered 6 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 6 years ago

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

İsa Sua ÖNAL free commented 4 years ago

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


Marta Wierzbicka staff commented 4 years 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 free commented 4 years 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 free commented 3 years 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 3 years 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 free commented 3 years ago

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


admin@onlinedesign.in free commented 2 years ago

Thank you dear... Its works!!!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: ---
  • Browser: ----
  • OS: ----
  • Provided sample code: No
  • Provided link: No