Menu does not fade when clicked on responsive bootstrap site

Asked

Viewed 1,373 times

2

I’m trying to make the mobile responsive menu on a bootstrap site disappear altogether by clicking on its links. The site is one page and the links work via Anchors. The site has been modified into a ready themeforest theme by someone else. I believe that the class - Nav bar toogle Collapse - of bootstrap has to be modified. I tried to look for errors in JS files but could not find them. Follow the link of the theme to responsibly test the code and prints as an example. Thank those who solve the problem, I am waiting. Theme Builder: http://themeforest.net/item/builder-responsive-construction-site-template/full_screen_preview/11062294

Menu to be modified Tema originalComo deverá ficar o menutema original

<!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>
        <script src="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 responsive-layout nav-bar

2 answers

0

Well, if all your code is this, it’s because the end of the page is missing... the tags and classes are all correct, I did the test here, I just needed to add the final part and modify the links of the styles, to get from some CDN. I also tested picking from the theme site itself, 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>
<!-- Latest compiled and minified JavaScript -->
<script src="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 sections from your page temporarily to check the final tags and Avascripts, especially jquery and bootstrap, they give the menu functionality. See if the page can find their way.

  • wow, now that I saw that the question is from 2015... but it appeared on the home page :P

0

Just add this javascript on the page that by clicking on the menu it will close

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

Browser other questions tagged twitter-bootstrap responsive-layout nav-bar

You are not signed in. Login or sign up in order to post.