Prevent Toggle Navbar Icon Stacking on Top of Brand Logo

When using an image with img-responsive class on brand logo, how do you prevent the toggle icon that shows when the navbar collapses from stacking on top of the logo image? What I want is for the logo to scale down as browser window scales down.

See a quick example of my problem here: http://www.bootply.com/UP2MFV011K#

My logo is 398x120 px and it needs to have the navheader's height to allow for its size. Then when the browser window scales down, to scale down the logo image, but to not allow toggle nav icon to stack on top. At present the toggle icon will eventually stack on top before the logo starts to scale down.

---

By default in bootstrap images have a min-width of 100% which means it will move the navigaiton once the browser window is small enough to make room for it's 100% width. Probably the easiest solution would be to change the .navbar-brand width down to 80% on mobile size screens. And adding height:auto; will give you your desired responsive height.

.navbar-brand{
    width:80%;
    height:auto;
}

See my solution.

http://codepen.io/egerrard/pen/OMdWGy

链接地址: http://www.djcxy.com/p/69012.html

上一篇: 当调整大小时，Bootstrap导航栏切换图标栏在标题下的徽标下方滑动

下一篇: 防止在品牌标志顶部切换导航栏图标堆叠