导航栏小分辨率变为两行

Question

当我折叠它时，我的导航栏不断转换为两行。我尝试用我将在导航栏代码之后发布的 CSS 更正它。不幸的是，这完全把我的下拉菜单搞砸了，把它分解成比实际菜单按钮更小的按钮。我是 html/css 的新手，我在过去的四天里才学会了它。我还尝试了另一种方法，在主导航栏类中使用 nowarp 类，结果也很糟糕。

注意：如果我可以在没有我尝试的所有复杂 CSS 并且从另一个问题中学到一半的情况下做到这一点，我将不胜感激。

<!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <!-- Navigation Bar Menu Button for Smaller Resolutions -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-inner">
                    <!-- Logo -->
                    <a class="brand visible-xs-inline" href="index.html"> <img id="cherry" src="img/cheery3.svg"></a>
                    <!-- Small Resolution Navigation Label -->
                    <div class="navbar-right visible-xs-inline">
                        <ul class="nav navbar-nav">
                            <li><a id="nav-label" href="#">Navigation <span class="glyphicon glyphicon-arrow-right"></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- General Links to Other Pages -->
            <div class="collapse navbar-collapse" id="example-nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="visible-sm visible-md visible-lg"><a id="cherrybox" href="#"><img id="cherrytoo" src="img/cheery4.svg" alt=""></a></li>
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="bitcoin/index.html">Bitcoin</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>

损坏的 CSS

/*Important Small Resolution Fixes Section!*/
.navbar-left {float: left !important;}

.navbar-right {float: right !important;}
@media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after 
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }

.navbar-collapse:before {clear:both;}

.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}

.navbar-collapse.in > ul {border-top: 1px double #101010;}
}
.navbar-brand {
font-size: 25px;
line-height: 10px;
padding-bottom: 5px;
}
.logo_tagline {
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
color:#bbb;
}
}
/*End Fixes for Small Resolution*/

Answer 1

不完全确定您的目标是什么，但这是我的最佳猜测。为此，我几乎将您的代码恢复为 Bootstrap 默认导航栏。然后，我将构成切换按钮的 3 个水平条替换为“导航”一词和另一个字形图标。

<!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <!-- Navigation Bar Menu Button for Smaller Resolutions -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
                  Navigation <span class="glyphicon glyphicon-th-large"></span>
                </button>

            </div>
            <!-- General Links to Other Pages -->
            <div class="collapse navbar-collapse" id="example-nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="visible-sm visible-md visible-lg"><a id="cherrybox" href="#"><img id="cherrytoo" src="img/cheery4.svg" alt=""></a></li>
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="bitcoin/index.html">Bitcoin</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>

如果这不是你想要的，请更清楚地解释你想要什么，也许用问题的模型/图片。