带有徽标图标的响应式导航

Question

注我已经使页面的其余部分完全响应媒体查询。我只想要这个导航部分的帮助。

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

所以首先你要在这些街区周围做一些分区。一个围绕着徽标，一个围绕着菜单，最后一个围绕着社交图标。

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

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

你要想想，什么时候应该是这个“美孚”视图，并替换我的1200px在下面：

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

}

对于每个div您必须这样做，然后它应该工作；）