Are you baking a new startup or gunning for a new look for your brand logo? Why worry about all the hassle and concerns of getting a nice logo design when you can leave this to professionals? Today, you’re in for a treat.

We are collaborating with DesignCrowd on a contest that is giving away a $450 logo design, courtesy of DesignCrowd. This means that if you win this contest, you are getting your logo designed by the crowd of talent designers at DesignCrowd for free.

About DesignCrowd

DesignCrowd connects you with over 80,000 designer talents from all over the world who strive to give you stunning results by the numbers.

State your requirements, your budget and deadline then release it to the crowd. Take your pick from the submissions and post feedback or request for changes from the designers themselves. For more info, check out DesignCrowdTV.
And here are samples of some of the talent you will be tapping into.

How to Win

Want this $450 logo design service for free? Tell us in your comments:

1. what’s the purpose of this logo, and
2. how/where you will use it

That’s it! The winner will have his or her logo specifications listed and promoted on DesignCrowd. Expect more than 100 logo designs to pour in and after you’ve found your winning design, the $450 will be awarded to the winning entries, while you get your logo made by professionals for free!

We’re looking for one winner. Contest ends on the 30th of July, 2012 so you better start commenting. Best of luck!

Related posts:

1. Logo Design Gone Wrong: 10 Offbeat Examples
2. How to Create RSS Feed Logo with CSS3
3. How to Create Gmail logo with CSS3
4. A Look Into: 6 Olympic Logo Designs

One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages.

There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to do it in a second.

However, rather than applying an instant solution, in this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly.

• Demo
• Download Source

So, let’s just get started.

HTML

First of all, let’s add the meta viewport inside the head tag. This meta viewport tag is required for our page to scale properly inside any screen size, particularly in the mobile viewport.

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  

…and then add the following snippet as the navigation markup inside the body tag.

  <nav class="clearfix">  	<ul class="clearfix">  		<li><a href="#">Home</a></li>  		<li><a href="#">How-to</a></li>  		<li><a href="#">Icons</a></li>  		<li><a href="#">Design</a></li>  		<li><a href="#">Web 2.0</a></li>  		<li><a href="#">Tools</a></li>  	</ul>  	<a href="#" id="pull">Menu</a>  </nav>  

As you can see above, we have six primary menu links and added one more link after them. This extra link will be used to pull the menu navigation when it is hidden in a small screen.

Further reading: Don’t forget the viewport meta tag.

Styles

In this section, we start styling the navigation. The style here is only decorative, you can pick any colors as you desire. But in this case, we (I personally) want the body to have a soft and creamy color.

  body {  	background-color: #ece8e5;  }  

The nav tag that define the navigation will have 100% full width of the browser window, while the ul where it contains our primary menu links will have 600px for the width.

  nav {  	height: 40px;  	width: 100%;  	background: #455868;  	font-size: 11pt;  	font-family: 'PT Sans', Arial, sans-serif;  	font-weight: bold;  	position: relative;  	border-bottom: 2px solid #283744;  }  nav ul {  	padding: 0;  	margin: 0 auto;  	width: 600px;  	height: 40px;  }  

Then, we will float the menu links to the left, so they will be displayed horizontally side by side, but floating an element will also cause their parent collapse.

  nav li {  	display: inline;  	float: left;  }  

If you notice from the HTML markup above, we’ve already added clearfix in the class attribute for both the nav and ul to clear things around when we float the elements inside it using this CSS clearfix hack. So, let’s add the following style rules in the style sheet.

  .clearfix:before,  .clearfix:after {      content: " ";      display: table;  }  .clearfix:after {      clear: both;  }  .clearfix {      *zoom: 1;  }  

Since we have six menu links and we also have specified the container for 600px, each menu links will have 100px for the width.

  nav a {  	color: #fff;  	display: inline-block;  	width: 100px;  	text-align: center;  	text-decoration: none;  	line-height: 40px;  	text-shadow: 1px 1px 0px #283744;  }  

The menu links will be separated with 1px right border, except for the last one. Remember our previous post on box model, the menu’s width will be expanded for 1px making it 101px as the border addition, so here we change the box-sizing model to border-box in order to keep the menu remains 100px.

  nav li a {  	border-right: 1px solid #576979;  	box-sizing:border-box;  	-moz-box-sizing:border-box;  	-webkit-box-sizing:border-box;  }  nav li:last-child a {  	border-right: 0;  }  

Next, the menu will have brighter color when it is in :hover or :active state.

  nav a:hover, nav a:active {  	background-color: #8c99a4;  }  

…and lastly, the extra link will be hidden (for the desktop screen).

  nav a#pull {  	display: none;  }  

At this point, we only styling the navigation and nothing will happen when we resize the browser window. So, let’s jump to the next step.

Further reading: CSS3 Box-sizing (Hongkiat.com)

Media Queries

The CSS3 media queries is used to define how the styles will shift in some certain breakpoints or specifically the device screen sizes.

Since our navigation is initially 600px fix-width, we will first define the styles when it is viewed in 600px or lower screen size, so practically speaking, this is our first breakpoint.

In this screen size, each of two menu links will be displayed side by side, so the ul‘s width here will be 100% of the browser window while the menu links will have 50% for the width.

  @media screen and (max-width: 600px) {  	nav {    		height: auto;    	}    	nav ul {    		width: 100%;    		display: block;    		height: auto;    	}    	nav li {    		width: 50%;    		float: left;    		position: relative;    	}    	nav li a {  		border-bottom: 1px solid #576979;  		border-right: 1px solid #576979;  	}    	nav a {  	  	text-align: left;  	  	width: 100%;  	  	text-indent: 25px;    	}  }  

…and then, we also define how the navigation is displayed when the screen get smaller by 480px or lower (so this is our second breakpoint).

In this screen size, the extra link that we’ve added before will start visible and we also give the link a “Menu” icon on its right-side using the :after pseudo-element, while the primary menu links will be hidden to save more vertical spaces on the screen.

  @media only screen and (max-width : 480px) {  	nav {  		border-bottom: 0;  	}  	nav ul {  		display: none;  		height: auto;  	}  	nav a#pull {  		display: block;  		background-color: #283744;  		width: 100%;  		position: relative;  	}  	nav a#pull:after {  		content:"";  		background: url('nav-icon.png') no-repeat;  		width: 30px;  		height: 30px;  		display: inline-block;  		position: absolute;  		right: 15px;  		top: 10px;  	}  }  

Lastly, when the screen gets smaller by 320px and lower the menu will be displayed vertically top to bottom.

  @media only screen and (max-width : 320px) {  	nav li {  		display: block;  		float: none;  		width: 100%;  	}  	nav li a {  		border-bottom: 1px solid #576979;  	}  }  

Now, you can try resizing the browser window. It should now be able to adapt the screen size.

Further reading: Media Queries for Standard Devices.

Showing the Menu

At this point, the menu will still be hidden and will only be visible when it is needed by tapping or clicking on the “Menu” link and we can achieve the effect using the jQuery slideToggle().

  $(function() {  	var pull 		= $('#pull');  		menu 		= $('nav ul');  		menuHeight	= menu.height();    	$(pull).on('click', function(e) {  		e.preventDefault();  		menu.slideToggle();  	});  });  

However, when you resize the browser window right after you’ve just viewed and hid the menu in a small screen, the menu will remain hidden, as the display: none style generated by the jQuery is still attached in the element.

So, we need to remove this style upon the window resizing, as follows:

  $(window).resize(function(){  	var w = $(window).width();  	if(w > 320 && menu.is(':hidden')) {  		menu.removeAttr('style');  	}  });  

Alright, that’s all the codes we need, we can now view the navigation from the following links, and we recommend you to test it in a responsive design test tool, such as the Responsinator, so that you can view it in various width at once.

• Demo
• Download Source

Bonus: An Alternative Way

As we have mentioned earlier in this post, there some other ways of doing it, and using a JavaScript library called SelectNav.js is one of the easiest way. This is a pure JavaScript that is not relying on another third party library like jQuery.

Basically, it will duplicate your list menu and transform it into a <select> dropdown menu, then you are able to choose which one is hidden or shown depending on the screen size through media queries.

One of an advantage I like on this practice is that we don’t have to worry on the navigation style as the <select> menu will make use of the native user interface from the device itself.

Please, refer to the official documentation for further implementation.

Conclusion

We have come through all the way to create responsive navigation from scratch. This one we have created here is just one of examples, and as we stated earlier in this post and shown above, there are many other solutions you can implment. So, it is now leave to your decision to pick which practice that best fit to cater requirement and your web site navigation structure.

Related posts:

1. Mobile App Design/Dev: Building Navigation with jQuery
2. Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples
3. Top 10 Free Responsive Joomla Themes
4. LESS CSS Tutorial: Designing A Slick Menu Navigation bar

Like your Instagram photos? Then why not put that as your Facebook cover photo? But the limited tools on your computer is not going to cut it. It’s easy to set a single photo as your Facebook cover photo, but not if you want to customize sets of photos. Yes, I’m talking about putting up a gallery of Instagram photos as your Facebook Cover Photo.

How? Use Insta Cover. Insta Cover allows you to select a gallery of Instagram photos and turn your Facebook cover into a gallery of beautiful photos instantly. Let’s get started.

Customize Facebook Cover with Instagram

Firstly, you need to create your new Facebook Cover photo from your Instagram collection. To start creating, go to Insta Cover homepage and click on the button Sign In With Facebook.

Click on the button Go to App to allow Facebook integration with Insta Cover.

Now you will be redirected to the photo preference page. Set the Target Photos or Photos You Liked based on your Instagram user ID, or select Category or Tag to get a photo collection without providing your Instagram ID. You can then set the order of the photos, layout type, rounded corner and spacing too.

After setting all that is necessary, click on Preview.

In the preview window, you will see photos from Instagram based on the preferences you have set earlier. You will see an X button on each photo. Simply click to change any single image, or click on the ‘refresh‘ button at the top right to change all images at once. When satisfied, click on Final Preview.

In the final preview, you will see your new Facebook Cover photo. If you like the final result, click on Save to album on Facebook.

Change Cover Photo On Facebook

Now that your new Cover Photo is ready, go to your Facebook Timeline. Hover your cursor over your current Cover Photo, click on Change Cover > Choose from Photos.

Your photo selector will appear, and you will see the cover image you created from Insta Cover already uploaded, select that image.

Insta Cover had the cover photo created following the standard size of 851 x 315 pixels so you don’t have to adjust the placement. Click on Save Changes.

That’s it! Now you have your new Facebook Cover Photo based on an Instagram photo collection.

Conclusion

Beautiful, now you can always change your cover photo with beautiful photos from millions of Instagram collections. Like this FB Timeline-enhancing feature? There is also another app to add Twitter stream to your Facebook Timeline.

What are other apps do you use to customize your Facebook? Share it with us. Let us know in the comment.

Related posts:

1. Export and Backup Your Instagram Photos [Quicktip]
2. How to Browse Instagram Like Pinterest [Quicktip]
3. How to Add Instagram Effects to Any Photos [Quicktip]
4. How to Customize and Beautify Facebook Chat [Quicktip]