Menu does not disappear when clicking on responsive bootstrap site

Question

Menu does not disappear when clicking on responsive bootstrap site

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm trying to make the mobile responsive menu on a bootstrap site disappear completely by clicking on its links. The site is one page and the links work through Anchors. The site has been modified in a theme theme by another person. I think the class - nav bar toogle collapse - needs to be modified from the bootstrap. I tried searching for the errors in the JS files but I did not find them. Follow the link in the theme to responsibly test the code and prints as an example. Thank you to anyone who solves the problem, I'm waiting for you. Theme builder: link

Menu being modified

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content=".">
	<meta name="keywords".">
    <meta name="author" content="https://plus.google.com/103758766556143989736" />
    <link rel="publisher" href="https://plus.google.com/103758766556143989736" />
    <link rel="canonical" href="" />
    <meta name="robots" content="index, follow" />
    <meta name="Googlebot" content="all" />
    <link rel="icon" href="favicon.png" type="image/png">
    <title></title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/owl-carousel.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,300italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <link href="css/custom.css" rel="stylesheet">
    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="css/extralayers.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div id="wrapper">
        <section id="topbar" class="clearfix">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <p class="center"><i class="fa fa-phone"></i>(11)2887-9388 / (11)97567-7657</p>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <p class="center"><i class="fa fa-clock-o"></i>Atendimento - Horário Comercial </p>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <p class="center"><i class="fa fa-envelope-o"></i></p>
                    </div>
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </section>
        <!-- end section -->
        <header class="header clearfix">
            <div class="container-fluid">
                <nav id="jtheader" class="navbar navbar-default">
                    <div class="navbar-header">
                        <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="">
                            <img src="png" alt="logo">
                        </a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#sobre-nos">Sobre nós</a></li>
                            <li><a href="#servicos">Serviços</a></li>
                            <li><a href="#clientes">Clientes</a></li>
                            <li><a href="#contato">Contato</a></li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </nav>
            </div>

twitter-bootstrap layout-responsivo nav-bar

asked by anonymous 24.08.2015 / 00:01

2 answers

jwt.io integration with web api Rotate android image without resizing it?

score 0 · Answer 1

Just add this javascript on the page that when you click the menu it will close

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    $(".navbar-collapse").collapse('hide');
  });
});

score 0 · Answer 2

Well, if your code is all this, it's because the bottom of the page is missing ... the tags and classes are all correct, I took the test here, I just needed to add the final part and modify the links of the styles, to pick up from some CDN. I also tested taking the site's own theme, and it worked too. Below the part I added:

<!--/.container-fluid -->
    </header><!-- end header -->

    <section>
    <h1>Vai Corinthians</h1>
    <p>Ganhamos mais uma</p>
    </section>

    <div class="dmtop">Scroll to Top</div>

</div><!-- /#wrapper -->

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><!--LatestcompiledandminifiedJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="js/custom.js"></script>-->

</body>
</html>

ps: The final section I added to test, and the remaining HTML was from the theme source, only changing the links to use the CDNs.

If you can, remove the sections of your page temporarily to check the final tags and javascripts, especially jquery and bootstrap, are the ones that give the menu functionality. See if the page can find their way.