Mobile Responsive Header for WordPress Website in 2020

mobile responsive

Seven years ago, mobile responsive websites started to develop and coming thing. Today, if your site including the header isn’t mobile responsive, you’ve missed the race. You’re late to the competition in the world.

And you’re looking for it is reduced (or nonexistent) traffic. Because Google ranks on the basis of mobile-first.

Back in 2013, I wrote a blog about using a plugin to create a mobile responsive header for your WordPress site running a StudioPress theme.

That was then, it is now, and exactly nothing about that original pole is applicable in 2020.

What’s In That (Mobile Responsive) Header?

The header includes site logo or website titletagline if any, and (menu) primary navigation.

Eight years ago headers were mostly full width and took up a more portion of the screen at the upper top of the page. Here’s a picture of the WordPress Building Blocks homepage in January 2014.

WordPress Building Blocks homepage in January, 2014. Note the large header.

Notice how the header having two navigation bars and the site title take up about 1/3 of the vertical area at the top of the website screen. That was representative at that time.

Today, in order to billet mobile, that’s all now changed. The logo is smaller, and the site’s header area is comparatively small. On the homepage for the Big Brand Systems website, for example, the header takes only about 1/6 of the vertical space, with a lady image on the homepage using the remaining of the screen space.

Big Brand Systems homepage, with a very mobile responsive header

The header here contaain only of the Big Brand System logo and the line of navigation.

What do these look like on a cell phone screen? Well, back then, my website homepage considers this.

original WordPress Building Blocks homepage on a phone

Evidently, the website homepage was not mobile (freindly) responsive back then (although my header was!). Today, of course, the site is entirely mobile responsive.

Current WordPress Building Blocks homepage on a phone screen - much more mobile responsive!

WordPress today, mainly with the Gutenberg block editor, is developed to be mobile responsive. There’s completely no dispense for having a header that isn’t.

Start With the WordPress Theme

To make sure your header will regulate to billet viewing on computers, tablets, and phones, start with the WordPress theme.

Choose a WordPress theme that is:

  • HTML 5 ready to develop the site
  • Mobile (friendly) responsive
  • From a reputable developer and designer

Follow the theme developer and designer’s instructions for uploading a header photo of the accurate size. A well-developed theme will give that info within the Customizer. To find it, fallow Appearance / Customizer / Site Identity. You’ll see all the dimensions there or may pop up when you click the Upload logo button.

If you don’t size the logo image accurately, it may be cropped, or it may appear out of portion. The best way to make sure site logo looks the way you want it to is to size it accurately for the theme you’re using, before uploading it on the site.

dimensions for logo in Navigation Pro theme

Once you’ve uploaded an accurately sized logo image, your well-chosen theme takes care of the header’s mobile (friendly) responsiveness and you shouldn’t have to do a task.

If you’re not sure how the website header looks on a mobile phone device, there are many online tools that let you view your website page the way it shows up on other devices. One I like very much is the Responsive Design Checker, which lets you select specific devices and screen sizes to view.

If you’ve uploaded an accurately sized logo and it’s not showing properly on different devices, switch to a theme that is genuinely mobile (friendly) responsive. In 2020, nobody should need to skip through hoops to make that happen.


Leave a Reply

Your email address will not be published. Required fields are marked *



WhatsApp plans to start charging a fee to some users

apple one

Sign up for Apple One on iPhone and iPad