html - 带有 Logo 图标的响应式导航

Question

我有一个 1280px 宽度的菜单。导航菜单有一个 Logo ，然后是菜单项，然后是两个串联的社交图标。像下面 我想要什么

我希望在屏幕上调整出现在顶部的 Logo 的大小，然后是菜单(折叠)和社交图标。像这样

注意我已经通过媒体查询使页面的其余部分完全响应。我只需要此导航部分的帮助。

HTML

<div class="navigation">
    <div class="continer">
    <div class="menu_full">
    <div class="logo">
    <div class="logo_file"><img src="images/logo2.png" /></div>
    </div>
    <!-- nav menu -->
    <div class="menu">
    <ul>
    <li class="active"><a href="#" >Home</a></li>
    <li><a href="#" >Portfolio</a></li>
    <li><a href="#" >Services</a></li>
    <li><a href="#" >About</a></li>
    <li><a href="#" >Contact</a></li>


    </ul>
    </div></div>

CSS

.container {
    width:1280px;
    margin: 0 auto;
}
/* styles for navigation */
.navigation {
    height:70px;


}
.menu_full {
    margin-left:60px;

}
.logo {
    float:left;
    height:70px;
    width:250px;
}
.logo_file {
    width:130px;
    height:30px;
    margin-left:100px;
    margin-top:35px;
}
.menu {
    float:left;
    width:500px;
    height:60px;
    padding-bottom:10px;

    font-family:ubunturegular;
}
.menu ul {
    list-style-type:none;
    margin-top:5px;
}
.menu ul li {
    display:inline-block;
    height:25px;
    margin-left:5px;
    padding: 5px;
    width:55px;
}
.menu li a {
    color: black;
    display: block;
    padding: 20px 2px;
    text-align:center;
}
.menu ul li a:hover {
    background:url(../images/selector2.png);
    width:65px;
    height:20px;
    color:#FFF;
}
.activee {
    background:url(../images/selector2.png) no-repeat;
}

社交图标(博客和搜索图标)的 CSS

.search {
    float:left;
    width:300px;
    height:68px;
    margin-left:10px;
}
.blog {
    float:left;
    width:140px;
    height:68px;
    color:#FFF;
}
.blog_inner {
    background:url(../images/blog22.png);
    width:56px;
    height:21px;
    margin-top:31px;
    color:#FFF;
    text-decoration:none;
    padding-top:4px;
    padding-left:10px;
}
.search_icon {
    float:right;
    width:140px;
    height:68px;
    margin-top:25px;
}

Answer 1

所以首先你必须在这些 block 周围做一些 div。一个围绕 Logo ，一个围绕菜单，最后一个围绕社交图标。

您可以使用显示宽度:全尺寸例如:

.logoDiv {
width: 15%;
float: left;
}

你必须想，这个“mobil” View 应该在什么时候替换我的 1200px 在以下位置:

@media (max-width: 1200px) {
    .logoDiv{
    width: 100%;
    float: none;

}

对于每个 div，您都必须这样做，然后它才能正常工作；)