The Blog All my Latest Web Posts & Rants

I blog sometimes, whether it's a web design tutorial, development opinion or general rant about the price of my favourite drink. You'll be able to find all of what I say on this page.


Data Label on WordPress Navigation

  • Tutorials
  • 0:55 reading time (ish)
  • 177 words

Hey guys, I thought this might be of interest – nothing more than a code dump. If you have any questions or suggestions please leave a comment below!

This code snippet allows you to add data-labels to your WordPress (wp_nav_menu) navigation items. Why would you want to do this? In my particular case, I’m using it as a ‘hover state’  for a client build – When the user hovers over a menu item, the data-label scrolls in as the menu item scrolls out creating a nice little effect.

Just a heads up, this code was made on a random ‘light bulb’ moment so the code could do with some cleaning up! (I’ll get round to it eventually ;-))

HTML:

CSS:

Add the following into your functions.php

Add this into your header.php

Next, just add a ‘Description’ to each Menu Item via the Appearance > Menu admin page (if you can’t see the option, look top-right, toggle ‘Screen options’ and check ‘Description’).

Voila!

Thoughts? Comments?

A smarter responsive mobile navigation

It seems a lot of web developers and designers aren’t too happy with the standard hamburger style menu solution. I wish I could tell you I’ve found a better method but honest, I haven’t, sorry.

What I have done though, alongside Yoto Creative, is develop a smarter way of displaying a navigation to users. Usually you’ll find the navigation in the top-right section of your page, on tablet and mobile we also find this because the navigation becomes hidden and replaced by the hamburger icon.

This is fine, on desktop at least – but on mobile and tablet you may find you’re having to stretch your thumb to reach the navigation. So what if we moved it to be a little more accessible?

Chrome WP-Admin Bugfix

  • Tutorials
  • 1:06 reading time (ish)
  • 209 words

So I’ve noticed quite a few users discussing the latest issue with Chrome and WordPress, in the particular the admin panel where it breaks every so often (in particular, not every link is visible until you interact with it).

I won’t go into a great amount of detail because it has been well documented elsewhere by Jeff Chandler. That said, if you’re interested in a more client friendly approach then carry on reading!

5 Great Sites to get Free Stock Photos

  • Tutorials
  • 1:28 reading time (ish)
  • 280 words

Whether it’s for your own website or a client project, stock photos can be a great help to bring any design to life. Unless you own a camera and a pristine MacBook Pro along with a DotGrid sketchbook, you will probably find yourself trying to find something suitable on the internet.

man in glasses free image resource

Trying to find a high-res professional photo that won’t cost an arm and a leg can be quite difficult. I have put together a list below of some good websites I have been told about that offer some great high-resolution images with a range of different categories. Some resources like Im Free allow you to search specifically for a subject whereas some like LifeOfPix accept submissions.

The different types of Responsive Design

  • Tutorials
  • 9:35 reading time (ish)
  • 1823 words

responsive-design

In this post I will be discussing Responsive Web Design and Fixed Responsive Web Design along with Client-Side Adaptive Design and Server-Side Adaptive Design. This post is aimed towards anyone seeking understanding on each technique available and how each method varies.

Looking for a quick and simple definition of RWD/AWD?

  • responsive web design can fluidly change to fit any browser/screen size using a combination of percentage or fixed dimensions and media queries.
  • An adaptive web design changes to suit its environment using but not limited to media queries which target device types. Client-side specialises in media queries and JavaScript where Server-side will often load a separate design for smaller screens compared to a desktop version.