How to close(hide) menu on mobile when menu item is clicked - javascript

I have a problem with my website when it is seen on mobile phone. I have one button that opens "table" with menu items. When I click on some menu item, correct page opens, but "table" with menu items is not closed. It closes only when I click on menu button again.
I tried all the solutions for similar situations that are offered here, but non of them worked for me.
Does anyone have a clue how can I fix this?
Thanks in advance!
Here is my code:
in head tag:
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/templatemo_custom.js"></script>
<script src="js/jquery.lightbox.js"></script>
<script src="js/bootstrap-collapse.js"></script>
in body tag:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

You have to use javascript for that. Try below code.
<script>
function closeFunction()
{
document.getElementById('bs-example-navbar-collapse-1').style.display='none';
}
</script>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5"onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

I've found a solution to my problem :)
In addition to Omkar solution, there should be one more function - for button it self:
<script>
function closeFunction()
{
document.getElementById('bs-example-navbar-collapse-1').style.display = "none";
}
function openFunction(){
document.getElementById('bs-example-navbar-collapse-1').style.display = "initial";
}
</script>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" onclick="openFunction()" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Related

transform a menu in a dropdown menu

How do I transfrom a normal menu in a dropdown menu when the page is accessed by a small device? My code it's like this, it's responsive but I don't know how to implement this kind of menu. I wanted to put that 'hamburger menu'.
Ps: I can't modify the html
HTML updated:
<div id="pai" class="row">
<div class="col-xs-12 col-xs-10">
<div class="menu">
<nav>
<div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="menu" class="nav navbar-nav">
<li class="LogoPosicao"> <img class="img-responsive" id="imagemBBlogo" src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
<li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
<li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
<li><a class="Quebra">|</a></li>
<li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
<li id="contatoLI"><a class="Contato" href="#Contato-Site" button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
Just did it.
:
<div id="pai" class="row">
<div class="col-xs-12 col-xs-10">
<div class="menu">
<nav>
<div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="menu" class="nav navbar-nav">
<li class="LogoPosicao"> <img class="img-responsive" id="imagemBBlogo" src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
<li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
<li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
<li><a class="Quebra">|</a></li>
<li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
<li id="contatoLI"><a class="Contato" href="#Contato-Site" button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>

Javascript elements in Bootstrap not working

I am a beginer in bootstrap. I have tried elements like navbar, dropdowns, modal, carousel etc. and none of them are working properly. I'm guessing, it is because of the JS files which are linked to it. Please help I require these elements for a project.
Thank you.
<div class="navbar navbar-default">
<div class="conatiner-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="navbarLogo">MyWebsite</a>
</div>
<div class="collapse navbar-collapse" id="#navbar-collapse1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>About us</li>
<li>Team</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script scr="js/bootstrap.min.js"></script>
this works fine you have a few issues, most are typos as pointed out by #Rachel Gallen but you are also setting the id for navbar-collapse1 to its css selector value. you should set it to id="navbar-collapse1", adding the # is only used when doing a document query for the element. please review this documentation for more on selectors https://api.jquery.com/category/selectors/
<html>
<body>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="navbarLogo">MyWebsite</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>About us</li>
<li>Team</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Unable to get navigation to collapse automatcially in mobile view

How come the data-toggle doesn't work? The menu stay open when pressed! Looking to get it to close! Any ideas?
I'm not sure what else to do!! Thanks
<!-- main nav -->
<nav id="navbar-collapse" class="collapse in navbar-collapse navbar-right" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li><a style="color: #9d9d9d;" href="#body">Home</a></li>
<li><a style="color: #9d9d9d;" href="#about">About</a></li>
<li><a style="color: #9d9d9d;" href="#portfolio">Screenshots</a></li>
<li><a style="color: #9d9d9d;" href="#testimonials">Testimonials</a></li>
<li><a style="color: #9d9d9d;" href="#price">Features</a></li>
<li><a style="color: #9d9d9d;" href="#contact">Contact</a></li>
<li><a style= "background-color: #2a7ead; color: #fff;"href="#yo">Buy Now</a></li>
</ul>
</nav>
<!-- /main nav -->
<div class="navbar-header" >
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<img style="padding-left: 7px;" src="img/logo.png" alt="logo">
<!-- /logo -->
</div>

bootstrap menu not hiding after click the button?

This is the website here
When we view it minimized mode, the menu toggles ON after clicking the button, but when we click the button gain, it does not toggle off?
How to make this work ?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Click<span>Desti</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li><b>Show Categories</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</li>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

twitter-bootstrap nav not toggling collapse

Here is my markup for my nav using bootstrap....
I'm not sure why the div with class of 'mynavbar' is not toggling open and close (by adding the 'in' class to it) when the button with a data-target='.mynavbar' is clicked (this is only on smaller screens where the hamburger type menu shows instead of the links "work, about, contact)
ALso, on large and small screens, should the li's that are clicked on have the class of "active" added to them? I'm not seeing this happen either
<nav class='navbar navbar-fixed-top drop-shadow'>
<div class='container-fluid'>
<div class='navbar-header page-scroll'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.mynavbar'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand page-scroll' href='#'><i class='glyphicon glyphicon-home'></i></a>
</div>
<div class='collapse navbar-collapse mynavbar'>
<ul class='nav navbar-nav'>
<li><a class='page-scroll' href='#work'>Work</a></li>
<li><a class='page-scroll' href='#about'>About</a></li>
<li><a class='page-scroll' href='#contact'>Contact</a></li>
</ul>
</div>
</div>
</nav>
You need to target to ID in <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">, instead of class. Then change the element that has collapse navbar-collapse class to <div class="collapse navbar-collapse" id="mynavbar">
Overall, this code should work for you
<nav class="navbar navbar-fixed-top navbar-inverse drop-shadow" role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#">
<i class="glyphicon glyphicon-home"></i>
</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a class="page-scroll" href="#work">Work</a></li>
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
And, you can add class="active" to your <li> when clicked, this is often handled in the server-side or in your own URL router

Categories