Auto close Navbar when click on link (responsive mode)

PavelVe pro answered 2 years ago

Please insert min. 20 characters.

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

Hi,

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

Keep coding, Marcin

Add comment

manuelandrade3 free answered 4 years ago

0 0 Best answer

<p>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:</p>

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

<p>html {
    scroll-behavior: smooth;
    margin-bottom: 0px;
}</p>

<pre class="prettyprint"><code>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; 
}
</code></pre>

<p>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;</p>

<p>}
.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;
}</p>

<p>.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;
}</p>

<p>.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;
}</p>

<p>

- Principal
                - Quienes Somos
                - Que Hacemos
                      > Inversiones en Bienes Raices
                      > Hipotecarios Mexico
                      > Hipotecarios USA
             <br>
        
BNC Investments

<br>
body {margin:0;}

Hipotecarios Mexico
                    Inversiones en Bienes Raices
                    Hipotecarios USA
                     
                
             <br>
      </p>

<pre class="prettyprint"><code></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">
</code></pre>

<p>
         
             </p><p>Hipotecarios USA</p> <br>
         
    
    
<p></p>

Please insert min. 20 characters.

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

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

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

Regards

Add comment

OKJOBS.bg free answered 4 years ago

0 0 Best answer

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

Add comment

OKJOBS.bg free answered 4 years ago

0 0 Best answer

<p>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)</p>

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

<pre class="prettyprint"><code>            
            <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>
</code></pre>

<p>Thanks in advance!
Regards,
Peter </p>

Please insert min. 20 characters.

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

Add comment

Udis Klorenz free answered 4 years ago

0 0 Best answer

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

Add comment

nothingeni free answered 4 years ago

1 0 Best answer

Please insert min. 20 characters.

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

Any solution for module not found: error

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

Add comment

Jean-Marc Comby free answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

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 4 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

Add comment

Noksu Kaw free answered 7 years ago

0 0 Best answer

Thank you so mutch Marta ! # problem solved

Add comment

Marta Wierzbicka staff answered 7 years ago

8 0 Best answer

Hi, here is the code for this:

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

Best, Marta

Mauricio Ortensi pro commented 7 years ago

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

İsa Sua ÖNAL free commented 5 years ago

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

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

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

admin@onlinedesign.in free commented 3 years ago

Thank you dear... Its works!!!

Add comment