Responsive Navigation Demo: Top-Nav (Do Nothing) The top-nav pattern is the simplest responsive pattern. It's "do nothing" nickname isn't 100% accurate as you generally need to make a few changes, but those changes are fairly minimal. Here the main change is to move the navigation from below the logo on smaller screens, to it's right on wider screens.
Below 768px both menu and logo are centered and the menu sits below. At 768px and above both logo and menu are floated left and the menu is given a left margin to provide some space in between. Additional media queries contain styles to adjust the padding of the links as space allows. The HTML Here's the html used to create the header of this page. The Default CSS Here's the css that loads by default The CSS in Media Queries Here's the css included in media queries Tips This pattern works best when you have a limited number of links in your navigation. There's also the "fat finger" issue to deal with on small devices. Adaptive. Adaptive Blog Theme: Single Post Styling. Menu Notification Badges Using HTML5 Data-Attributes. Expandable Mobile Search Form. Previously I wrote a tutorial on mobile navigation, today I'm going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs.
This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form. View Demo Search Form The Purpose On mobile display, every pixel counts. To minimize the space required to display the search form, it is displayed in a compact form and then expand to full width on :focus. This way more space can be used for other interface elements or content area. On Best Web Gallery, I use jQuery to fade in the search form when the search button is clicked. Let's Start: The HTML Code Below is the sample HTML form. Reseting The Default Webkit Search Input By default, Webkit browsers style the search input like the screenshot shown below: To remove the default style so it looks like a regular text field, add the following CSS: Example B (view demo)
WebDesign. HTML 5.