CODEWITHSUNDEEP
htmlcssresponsive
Khan
Khan

Reputation: 43

responsive navigation with logo icons

i have a menu of 1280px width. the navigation menu have a logo then menu li item and then two social icons in series. like below enter image description here what i want

i want that on the screen resizing the logo appeard on the top then menu(collapsing)and social icons. like this enter image description here

Note i have make rest of the page fully responsive through media queries. i want help for this Navigation Part only.

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 for social icons (blog & search icon)

.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;
}

Upvotes: 0

Views: 309

Answers (1)

MAESTRO_DE
MAESTRO_DE

Reputation: 475

So first you have to do some divs around those blocks. One around the logo, one around the menu and the last one around the social icons.

You can work with the display width: Full Size FOR EXAMPLE:

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

You have to think, when should be this "mobil" view and replace my 1200px at the following:

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

}

For each div you have to do it like this and then it should work ;)

Upvotes: 1

Related Questions