带有 2 个标题的引导页面 - 下部是 navbar-fixed-top - 向下滚动时内容覆盖顶部标题

Question

对于我的 C# asp.net mvc Razor _layout 页面，我无法找到为引导页面实现 2 行标题/导航栏的解决方案 使用导航栏固定顶部

我的设计要求

• 顶部有一个简单的 1 行功能，带有指向联系信息的超链接和指向社交媒体的链接。

及以下

• 标准引导导航栏

这是一个屏幕截图，说明了我需要实现的内容（来自我为构建网站而购买的模板）-

example without fixed-top

该实现中的 2 行菜单在任一行中都没有 navbar-fixed-top 类。

当我运行我的版本时——在下一行使用 class="navbar-fixed-top "——（标准的 Bootstrap 导航栏）

向下滚动时——页面的主体被下部导航栏隐藏，但显示在顶级标题的顶部

其次

顶部导航栏没有响应

底部菜单在 small/xsmall 上正常工作

但是

社交媒体图标不换行...在手机上显示时，只有最左边的（手机电子邮件链接）出现在顶部——即使第一行配置为一组两个 xs-small-12 列

（下面的标准 Bootstrap 导航栏完美运行（

我相信我的代码符合标准 Bootstrap 约定……但我不会将此作为错误报告……/认为这种设计是不受支持的功能。

是否有使用一些脚本代码的解决方法？

我正在寻找一个显示最佳实践的答案：

• 滚动时避免正文出现在顶部标题上

• 当页面进入 sm-xs 大小时，使顶部标题真正响应并堆叠顶部标题的 2 个边在其他上方？？

考虑在页面加载后将顶部菜单注入标准导航栏上方的 Angular 或 jQuery 函数——如果调整浏览器大小，则重复该过程

感谢所有建议。谢谢，史蒂夫

Answer 1

让它工作！希望你们中的一些人觉得这很有用....如此多的顶级网站具有复杂（和简单）的导航栏，这些导航栏会滚动到页面外...。恕我直言，这不是一个很好的用户体验

navbar-fixed-top 类是包含两行的部分的属性 (1) 带有链接的顶行和 (2) 导航栏

（还需要对边距和内边距进行一些 CSS 更改......

奇怪的是，注入到 _Layout 的视图溢出了包含 RenderBody() 的 div 的 Container/Row 部分，并将渲染视图的顶部隐藏在标题后面 .. 需要使用边距设置来修复它

======= CONTAINER / ROW 通过“RenderBody”注入到布局中=======

<div class="container-fluid">
    <div class="row">

   ******Main Page Content Here******


    </div>
</div>

这就是解决办法...

         
navbar-fixed-top class is property of section that wraps the top row with links and the navbar 

    <section id="NFTParent" class="navbar-fixed-top">
                    <header id="Header-1" class="header">
                        @*<nav class="navbar navbar-default role=navigation">*@
                        <div class="container">
                            <div class="row">
                                <div class="col-xs-12 col-sm-8 header-info-wrapper">
                                    <ul class="list-inline">
                                        <li><i class="fa fa-phone fa-lg"></i> Phone: 888-925-1858</li>
                                        <li><i class="fa fa-envelope"></i> Mail: <a href="mailto: info@avanttek.com"></a></li>
                                    </ul>

                                    <!-- /.list-inline -->
                                </div>
                                <!-- /.header-info-wrapper -->
                                <div class="col-xs-12 col-sm-4 social-link-wrapper">
                                    <ul class="social-links">
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        .
                                        .
                                        .
                                        <li><a href="#"><i class="fa  fa-envelope fa-lg"></i></a></li>
                                    </ul>

                                    <!-- /.social-links -->
                                </div>
                                <!-- /.social-link-wrapper -->
                            </div>
                            <!-- /.row -->
                        </div>
                        @*</nav>*@
                        <!-- /.container -->
                    </header>
                    <!-- /.header-1 -->
                    @*<header id="header-2" class="header navbar-fixed-top">*@
                    <header id="header-2" class="header">
                        <nav class="navbar navbar-default" role="navigation">
                            <div class="container">
                                @*<div class="row">*@
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="#">Avant<span>Tek</span></a>
                                </div>
                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <div class="navbar-collapse navbar-ex1-collapse collapse" aria-expanded="false" style="height: 0.666667px;">
                                    <ul class="nav navbar-nav">
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Home</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Home Layout 1</a></li>
                                                <li><a href="#">Home Layout 2</a></li>
                                                <li><a href="#">Home Layout 3</a></li>
                                                <li><a href="#">Home Layout 4</a></li>
                                                <li><a href="#">Home Layout 5</a></li>
                                            </ul>
                                        </li>
                                <!-- /.container -->
                            </div>
                        </nav>
                        <!-- /.navbar -->
                    </header>
                </section>
            </div>

                <div>
                    @RenderBody()
                </div>

===================  CONTAINER / ROW IS INJECTED INTO LAYOUT VIA RenderBody() ===========================

<div class="container-fluid">
    <div class="row">
LORUM IPSUM ..... CONTENT EMBEDDED IN ROW COLUMNS
    </div>


</div>