引导程序崩溃导航栏不工作在自定义WordPress主题
我看了大量的例子,并做了研究,我很卡住。引导程序崩溃导航栏不工作在自定义WordPress主题
我正在构建一个使用html5空白和引导CDN的自定义WordPress主题。我试图在响应大小中折叠我的导航。我能够让它崩溃并创建按钮,但我无法让它暴露内容。
这是我的html和css。我错过了什么和/或做错了什么,我还能提供什么帮助您更好地解答问题?
<header class="banner navbar navbar-static-top navbar-default header page-section clear" role="banner">
<div class="wrapper clear">
<div class="logo">
<a href="<?php echo home_url(); ?>">
<!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
n<img src="<?php echo get_template_directory_uri(); ?>/img/mj-logo.png" alt="Logo" class="logo-img">
</a>
</div>
<div class="navbar-header">
<button type="button" style="background-color:black" class="navbar-toggle collapsed" 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>
</div>
<nav class="nav collapse navbar-collapse" role="navigation">
<?php html5blank_nav(); ?>
</nav>
</div>
</header>
.wrapper {
max-width:1280px;
width:95%;
margin:0 auto;
position:relative;
}
/* header */
.header {
top:0;
left:0;
right:0;
position: fixed;
background:#fff;
z-index: 1;
height: 0px;
overflow:hidden;
display:block;
opacity: 0;
transition: all .32s ease-in-out;
-moz-transition: all .32s ease-in-out;
-webkit-transition: all .32s ease-in-out;
}
.header.active {
opacity:1;
height: 80px;
}
.page-section {
width:100%;
height:100%;
margin:auto;
}
JS链接的顺序:
/wp-includes/js/jquery/jquery.js?ver=1.11.0
/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.
/wp-content/themes/michaeljerome.com/js/scripts.js?ver=1.0.0
https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
检查,如果你提供的JavaScript,jQuery的JavaScript和引导的javascript
引导的javascript
的jQuery JavaScript的
这通常是没有崩溃问题的问题。
jQuery的Javascript必须先走,然后引导js文件
///这是你的HTML标记
“> N/IMG/MJ-logo.png” ALT = “标志” 类= “标志-IMG”> 切换导航
如果你想添加一个标志或别的东西在你的头放在不同的列,最好不要混为一谈。
尝试像
<header>
<div class="container">
<div class="row">
<div class="col-md-4">
here goes whatever you want like your logo
</div>
<div class="col-md-8">
//here paste the navbar html code, not mixed with you header 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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</header>
如果上述方法无效,拿出你有任何的CSS,以检查你的CSS中的一个压倒一切的导航栏的CSS。
查看我的js的顺序以及我在编辑中包含的js。 – user2684452 2014-09-19 01:37:02
我检查你的html,你没有适当的html标记的导航,检查这个链接的标记http://getbootstrap.com/components/#navbar,我认为它应该会更容易,如果你只是让导航栏标记,因为它是不混合你的头HTML,如果你想在你的头添加一个标志,把它放在一个不同的列, – 2014-09-19 01:52:37
溢出:隐藏在您的标题看起来像问题。 – Christina 2014-09-19 01:02:59
溢出隐藏是我的标题,只有在通过JavaScript滚动300px后出现。 – user2684452 2014-09-19 01:36:36