【发布时间】：2019-06-25 21:28:02
【问题描述】：
我知道有几个棘手的问题，但我还没有找到解决方案。这是我的代码：
<body <?php body_class(); ?>>
<div class="container">
<header class="header-container text-center">
<div class="social-menu" style="height: 20%">
<h3><i class="fa fa-facebook-square"> </i> <i class="fa fa-instagram"> </i> <i class="fa fa-twitter-square"> </i> <i class="fa fa-youtube-square"></i></h3>
</div>
<div class="header-content table" style="height: 60%">
<div class="table-cell">
<div class="logo-image"></div>
<h1 class="site-title"><span class="d-none"><?php bloginfo('name'); ?></span></h1>
<!-- add hidden title for SEO -->
<h2>Španski Metar</h2>
</div>
</div>
<div class="nav-container">
<nav class="navbar sticky-top navbar-expand-lg is-sticky navbar-light navbar-spanski">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="<?php esc_html_e( 'Toggle Navigation', 'spanski_metar' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbar-content">
<?php
wp_nav_menu([
'menu' => 'main_menu',
'theme_location' => 'main_menu',
'menu_id' => false,
'menu_class' => 'navbar-nav mr-auto',
'depth' => 2,
'fallback_cb' => 'nav_walker::fallback',
'walker' => new nav_walker()
]);
?>
<!-- <div id="navsearch">
<form class="form-inline my-2 my-lg-0">
<input class="form-control-sm" style="padding-left:5px; border-style: solid; border-width: 1px;" type="search" placeholder="Pretraga" aria-label="Search">
<button class="btn my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
</form>
</div> -->
</div>
</nav>
<div style="height: 1000px"></div>
</div><!-- .nav-container -->
</header>
</div>
我发现sticky-top 工作的唯一方法是将1000px 高度的div 放在nav-container div 中。但这不是我想做的。有没有办法保持导航栏的顶部和标题内？这不是最佳做法吗？
感谢您的宝贵时间。
【问题讨论】：
-
标题要放在哪里？你想要导航栏在标题之后，还是在 1000px div 之后。问题不清楚。
-
在标题标签中，我希望首先拥有社交媒体菜单，然后是徽标图像，然后是导航栏。我添加了高 div 只是为了测试sticky-top。
-
没有内容怎么粘？它具有粘性类，但如果页面内容不大于视口，则看不到它。
标签： css wordpress bootstrap-4