保持汉堡菜单内嵌徽标

我使用标准的导航栏引导程序4汉堡包菜单进来的小屏幕作为参考，但是，当在较小的屏幕上测试它包裹在navbar品牌的位置下，我似乎无法找到css的特定部分以保持它与标志位于同一行上。问题在于它在较小的屏幕上遮挡了它下面的标题，这对于移动观众来说并不理想。保持汉堡菜单内嵌徽标

我使用CDN最新的自举4测试版

这里的链接到我与玩页：link:

任何人都可以点我在正确的方向？非常感谢！

我在那里得到的HTML如下：

HTML：

<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top"> 
    <div class="container-fluid navbrand"> 
    <a href="index.html" class="navbar-brand"><img src="img/sflogo.png" style="width:80%;height:80%;"/></a> 
     <button class="navbar-toggler" data-toggle="collapse" data-target="#hamburgerMenu"><span class="navbar-toggler-icon"></span></button> 
     <div class="collapse navbar-collapse" id="hamburgerMenu" style="opacity:1;"> 
     <ul class="navbar-nav ml-auto"> 
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li> 
      <li class="nav-item"><a href="#" class="nav-link">About</a></li> 
      <li class="nav-item"><a href="#" class="nav-link">Services</a></li> 
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
    <header id="home-section"> 
    <img src="img/headbg.jpg" style="width:100%; height:auto;" /> 
    </header> 
    <div class="underhead"> 
    We have "Goods In Transit" Insurance!<br /> 
    <span style="font-weight:normal;">Rest assured all your items will be covered during your move.</span> 
    </div>

的CSS是：

body { 
    background-color: #fff; 
    color: #f2e000; 
} 

.navbar-light .navbar-brand { 
    font-weight:bold; 
    color: #f2e000; 
} 

.navbar-light .navbar-nav .nav-link { 
    color: #333; 
} 

.container .navbar-brand:hover { 
    color: #000; 
} 

.navbar { 
    opacity: 0.8; 
} 

.nav-link { 
    font-weight:bolder; 
    font-size: 20px; 
} 

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { 
    color: #f2e000; 
} 

#home-section { 
margin-top:4.5em; 
} 

.underhead { 
    background:#f2e000; 
    color:#333; 
    text-align:center; 
    font-weight:bold; 
    font-size:2vw; 
    width:100%; 
    padding:20px; 
} 

@media (max-width:500px) { 
    .underhead { 
     font-size: 0.8em; 
    } 
} 

@media (max-width: 460px) { 
    .navbrand img { 
     width:40%; 
     height:40%; 
    } 
}

来源

2017-10-21 Dauntless0

您可以将您的代码添加到que Stion的。 Stackoverflow是一个协作网站，更多的人可以从您目前遇到的类似问题的答案中受益。请阅读：[如何问]（http://stackoverflow.com/help/how-to-ask）| [最小，完整和可验证示例]（http://stackoverflow.com/help/mcve） – Tom

“
”和“”标记不使用或需要结束斜线。 – Rob

你是对的罗布，我是老学校，我猜想，仍然藏在旧的HTML4天！哈！ – Dauntless0

HI，你可以通过调整CSS的变化做出相同的：

@media (max-width: 575px) { 
    button.navbar-toggler { 
     position: absolute !important; 
     right: 10px !important; 
     top: 14px !important; 
    } 
}

来源

2017-10-22 01:13:51 DesignerAshish

这确实修复了它的移动版，而不是Firefox;不是说要说实话！我应该用绝对的位置，一点金发的时刻！感谢那！ – Dauntless0

嗨我也检查过它在Firefox上，它似乎在那里工作得很好。 :) – DesignerAshish

可能是我的浏览器，我运行它的开发版本，所以它可以是越野车，这似乎是Firefox这些天！感谢您检查好友！ – Dauntless0

保持汉堡菜单内嵌徽标

回答

相关问题