responsive Navigation mit Logo-Icons

Question

Ich habe ein Menü von 1280px Breite. das Navigationsmenü hat ein Logo, dann Menü li Element und dann zwei soziale Symbole in Serie. das Logo appeard auf der Oberseite dann Menü (kollabiert) und sozialen Symbole wie unten , was ich will

ich das Ändern der Größe auf dem Bildschirm wollen. wie dieser

Hinweis ich habe Rest voll ansprechbar durch Medien-Anfragen von der Seite machen. Ich möchte Hilfe nur für diesen Navigationsteil.

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 für soziale Symbole (Blog & Suche Symbol)

.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

Also zuerst müssen Sie einige divs um diese Blöcke machen. Eine um das Logo, eine um das Menü und die letzte um die sozialen Symbole.

Sie können mit der Anzeigebreite arbeiten: Full Size BEISPIEL:

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

Sie haben zu denken, wann diese „mobil“ Ansicht und meine 1200px am folgenden ersetzen:

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

} 

Für jedes Div muss man es so machen und dann sollte es funktionieren;)