• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Responsive CSS for 500px Wide Logo, Social Icons, Search Form & Menu

This tutorial provides all the CSS & CSS Media Queries for using a 500px X 250px header image in the Genesis Sample child theme by StudioPress.

The CSS also includes Media Queries for displaying a 2nd image which is 360px X 180px on hand held devices below 500px width.

mobile-responsive-header

Also included is the CSS for using simple social icons, a search form and a custom menu widget, all in the header right widget area like you see in the following video:

Demo Video

Once the screen reaches 580px, a new image is displayed on the smallest hand held devices.

You simply create a image and add it to your child themes images folder using the filename logo-360.png.

Note: This solution has been developed for use with a header image which is exactly 500px wide by 250px high and also uses the header right widget area with social icons, search and menu in that order tested on the Genesis Sample child theme. Any variation may require modification of the CSS and CSS for Media Queries.

Here’s a fresh copy of the Genesis Sample child theme with all the CSS and demo images included.

Register for full access

Related Tutorials

  • Change Simple Social Icons Background & Hover Color

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.