在页面的标题和徽标的同一级别上显示导航栏

我使用低于徽标和页面标题的引导程序创建了一个导航栏。在页面的标题和徽标的同一级别上显示导航栏

但是，当涉及到更小的设备（手机），我喜欢把倒塌的导航栏上同一级别我的标题和标志是，但我无法弄清楚如何做到这一点。以下是我迄今为止：

<div id="menu" class="navbar navbar-inverse" role="navigation"> 
    <h1 style="text-align: center;margin-top:0;"> 
    <a href="#/" style="color:white;text-decoration:none"> 
     <img id="logo" src = "images/logo.svg" width="20px"> 
    </a> 
    <a id="title" href="#/" style="color:white;font-family: fantasy;text-decoration:none">Title of the page </a> 
    </h1> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    </div> 

    <div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="HeaderCtrl"> 
    <ul class="nav navbar-nav" > 
     <li ng-class="{ active: isActive('/about') }"><a href="#/about">aa</a></li> 
     <li class="dropdown"> 
     <a href="#" data-toggle="dropdown" class="dropdown-toggle">bb<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">aa</a></li> 
      <li><a href="#">bb</a></li> 
      <li><a href="#">cc</a></li> 
     </ul> 
     </li> 
     <li ng-class="{ active: isActive('/aa') }"><a href="#/aa">cc</a></li> 
     <li ng-class="{ active: isActive('/dd') }"><a href="#/dd">dd</a></li> 
     <li ng-class="{ active: isActive('/ee') }"><a href="#/ee">ee</a></li> 
    </ul> 
    </div> 
</div>

这里是我的小片段：https://jsfiddle.net/Lasjo4xz/3/

来源

2016-01-30 krakig

试试这个代码

@media (max-width: 767px) { 
    h1 { 
     position: absolute; 
     left: 0; 
     right: 0; 
    } 
    ... 
}

的position:absolute将使头（H1与img）失去它的占用空间，所以它可以在导航div上面。我觉得这是一个简单的解决方案，因为如果你想浮动navbar div，它可能会导致宽度问题

left:0; and right:0;确保元素水平居中。

来源

2016-01-30 20:00:48 Aziz

如何感谢你，它的作品就像一个魅力！也感谢解释，我是一个完全的CSS小白，但我想明白！ – krakig

乐意帮忙！请点击票数下的复选标记继续接受答案。祝你有个美好的一天，祝你好运 – Aziz

这里有一个快速和简单的解决办法：

@media (max-width: 767px) 
    #menu { 
     display: flex; 
     justify-content: center; 
    }

的h1是块元素。这意味着它始终占用容器的全部可用宽度。

对于包含菜单图标的div也是如此。

它们位于不同的行（垂直堆叠），因为它们都是块元素。

您可以尝试在媒体查询中将它们切换为inline-block。这将排队在一起。或者你可以使用flex。

来源

2016-01-30 20:02:28

在页面的标题和徽标的同一级别上显示导航栏

回答

相关问题