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

Question

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

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

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

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

所以首先你必须围绕这些块做一些 divs。一个围绕徽标，一个围绕菜单，最后一个围绕社交图标。

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

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

你要想想，这个"mobil"应该在什么时候查看并替换我的1200px在下面：

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

}

对于每个 div 你必须这样做然后它应该工作;)

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

responsive navigation with logo icons

html

css

responsive