我目前在Wordpress中使用Roots主题, 并且试图弄清楚如何将基于引导的导航栏移到页面的下方。目前, 它被推到页面的顶部, 我无法弄清楚如何使其移到背景图像之下。现在, 当我希望导航栏位于其下方时, 它位于背景图像的顶部。
这是我的标题html:
<
header class="banner navbar navbar-default navbar-static-top" role="banner">
<
div class="container">
<
div class="navbar-header">
<
button type="button" class="navbar-toggle" 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>
<
a class="navbar-brand" href="http://www.srcmini.com/<
?php echo home_url();
?>
/">
<
?php bloginfo('name');
?>
<
/a>
<
/div>
<
nav class="collapse navbar-collapse" role="navigation">
<
?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(array('theme_location' =>
'primary_navigation', 'menu_class' =>
'nav navbar-nav'));
endif;
?>
<
/nav>
<
/div>
<
/header>
当前与Nav区域有关的Less / CSS(这大部分来自Bootstrap variables.less文件中的库存):
@media (min-width: @screen-lg) { .navbar{ width: 940px;
} }
@navbar-height:55px;
@navbar-margin-bottom:@line-height-computed;
@navbar-default-color:#777;
@navbar-default-bg:@brand-medalist;
@navbar-default-border:darken(@navbar-default-bg, 6.5%);
@navbar-border-radius:@border-radius-base;
@navbar-padding-horizontal:floor(@grid-gutter-width / 2);
@navbar-padding-vertical:((@navbar-height - @line-height-computed) / 2);
@nav-link-padding:10px 15px;
我在弄清楚可以在我的app.less文件或variable.less文件中在此处操作哪些CSS来像以前所说的那样将导航栏下推时遇到了麻烦。我试图将图像div放在标题类之上, 但是我不知道这是否被认为是最佳实践。如果你还有其他需要, 请告诉我。我对从这里去哪里有些困惑。谢谢!
#1开始阅读http://getbootstrap.com/components/#navbar在默认导航栏旁边的Bootstrap提供了不同类型的导航栏, 固定到顶部, 固定到底部和静态顶部。你可以通过将类添加到< nav class =” navbar navbar-default” role =” navigation” > 中来设置类型
在代码中, 你使用navbar-static-top。你可以向其添加页边空白以将其设置为较低的位置:
< nav class =” navbar navbar-default” role =” navigation” style =” margin-top:100px; ” > 或.navbar-static-top {margin-top:100px; }
#2【如何将Bootstrap Navbar下移至页面】尝试使用此类navbar-fixed-top。这会将菜单栏拉到网页顶部。这可能就是你应该这样做的方式。 < header class =” banner navbar navbar-default navbar-static-top” role =” banner” >
推荐阅读
- 如何从WordPress主题中删除默认标题()
- 如何在自定义WP_Query中检索自定义帖子类型元字段
- 登录或注销时如何将用户重定向到当前页面()
- 当页面向下滚动时,如何防止logo在固定标题中调整大小()
- 如何在短代码中传递ID
- 如何加载WordPress分类标准列表并使用Ajax onclick发布
- 如何在WordPress中将单个帖子链接到thickbox()
- 如何在WordPress中隐藏模板( [关闭])
- WinRAR基础运用攻略