我使用jekyll
创建了一个网站,并使用了this主题。但是,这个问题是网站导航栏有链接,在移动设备中打开网站时不会崩溃。总而言之,导航栏根本没有响应。我希望在不改变CSS的情况下使其响应。我该怎么办?我的网站已包含bootstrap
和jQuery
。
这是标题html代码:
<header class="site-header">
<div class="container">
<a id="site-header-brand" href="/" title="xyz">
site title
</a>
<nav class="site-header-nav" role="navigation">
<a href="/"
class=" site-header-nav-item hvr-underline-from-center"
target=""
title="Home">
Home
</a>
</nav>
</div>
</header>
这是CSS:
.site-header{
padding-top:20px;
padding-bottom:20px;
width: 100%;
position: fixed;
margin: 40px 0 30px 0;
top: 0;
left: 0 !important;
right: 0;
z-index: 103;
color: #000;
background: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.site-header-nav{
float:right;
margin-bottom: -20px;
}
.site-header-nav-item {
color: #000;
display:inline-block;
padding:10px;
margin-left:1.25rem;
font-size: 20px;
}
.site-header {
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.site-header.site-header-nav-scrolled {
margin: 0;
background-color: white;
-webkit-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
-moz-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
-ms-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
-o-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
}
滚动功能的javascript:
$(window).scroll(function () {
var scrollPos = $(this).scrollTop();
if ($(window).scrollTop() > 55)
{
$('.site-header').addClass('site-header-nav-scrolled');
} else {
$('.site-header').removeClass('site-header-nav-scrolled');
}
});
答案 0 :(得分:0)
您需要创建导航栏折叠按钮并在移动设备中将链接包裹在按钮中。 bootstrap如何做到这一点有很好的例子。
答案 1 :(得分:0)
由于您在站点中使用了引导程序,因此我使用引导程序导航类和您的导航类来使其响应并折叠链接。您可以使用CSS自定义下面代码的外观。这是代码。
layout_below