Design fixed navigation on scroll with CSS and jQuery

One thing that can increase user experience and overall impression from your website is always present navigation. Why should the visitor scroll back to the top or click one more time to let the script move the window to the top? Remember, every click counts. We can easily solve this problem of accessibility by creating… Continue reading Design fixed navigation on scroll with CSS and jQuery

CSS tips and tricks #1: Enhancement with Modernizr

Today is I will start to release new series focused on using CSS called “CSS tips and tricks”. This series will be made up from tutorials about how to do interesting and useful stuff only through CSS. All topics will be chosen in order to be used in real-life projects. Some of these tutorials will… Continue reading CSS tips and tricks #1: Enhancement with Modernizr

Full-screen stacked navigation tutorial

For today, we will create full-screen stacked navigation with beautiful resizing width effect on hover. Our goal is to create navigation which will take approximately 25% of the page’s width and 100% of its height. If you read previous tutorial on “Full-screen page with centered navigation”, you know what am I talking about. Navigation will… Continue reading Full-screen stacked navigation tutorial

Full-screen page with centered navigation tutorial

Some websites use this very nice feature of being stretched to full-screen no matter if they contain any content. It often comes side-by-side with full-screen photo on the background, some times also using a blur effect. However, our goal for today will be creating this full-screen page with photo on background and centered navigation. This… Continue reading Full-screen page with centered navigation tutorial