Sticky header在移动设备上占据整个屏幕

时间:2017-03-09 12:42:45

标签: css wordpress navbar sticky

这是我的网站 - http://soundboycrew.co.uk/

当我减小屏幕尺寸时,粘性标头根本不能很好地优化。标题占据了整个屏幕。

我正在使用Wordpress和一个名为Lane的主题(我认为是使用Bootstrap制作的)。演示展示了良好的优化,但我相信有些事情搞砸了。

有什么办法可以添加一些自定义css来解决这个问题吗?

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

我认为问题是固定的尺寸。如果你想让它负责使用与px相反的ems。这同样适用于定位折叠导航的媒体查询中的属性“权限”。 水平放置元素会更改引导列的大小。例如:

<div id="logo" class="navbar-header col-md-2 col-sm-3 col-xs-12"></div>
<div class="email_phone col-md-5 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-sm-3 col-xs-12"></div>

并在

@media only screen and (max-width: 991px)
  .responsive #logo {}

删除

margin-left: 15px;