Improved Responsive Menu Twenty Twelve for i Phone, Android, Mobile and Tablet Devices

The Improved Responsive Menu Twenty Twelve

Improved Responsive Menu Twenty Twelve

Click To Enlarge

Improved Responsive Menu TFor Twenty Twelve

Click To Enlarge

This menu is used on Klick Design test it out first on your device.

I have assumed that you have created a child theme for Twenty Twelve if you have not then read this first.

Right lets start to change the menu, first you need to create a new custom menu.

Klick responsive menu settings.

Click to Enlarge

Navigate in your dashboard to Appearance>Menus and create a new menu.

Name the menu ‘Klick’, add the pages you want to the menu save the menu and select it as your primary menu.

For the next bits you can download the zip at the bottom of this page.

First open the add-to-styles.css file copy the code into the bottom of your child styles.css’

Next create a folder called js in your child theme and upload the klick-nav.min.js to that folder. I have minified the js for you to load nice and fast.

If you ever need to minfy a .js file then I use this tool it is free an just does it in a browser window.

Add the code from the add-to-functions.php into your child functions.php or simply rename the add-to-functions.php to functions.php and upload this to the child theme.

What’s left well it should be working for you now, You have your improved responsive menu twenty twelve so next to style it to match your theme colors.

In the above css you can change the width, background color and color of the text, I am sure some of you will get fancy.

Klick Design Responsive menu



Hide Page Name Titles WordPress

Hide Page Name Titles WordPress

Why would you want to hide page name titles in WordPress, well the simple answer is that it does not mean you do not want to use them it means you want a nice neat menu, can you imagine if my menu say’s “Hide Page Name Titles WordPress” on a page it would be hide page name titles wordpressan ugly menu.

You can simply add a page title using the heading 1 tag from the drop-down text styles. (See Image on right).

By doing this your H1 tag is still there if you want it, and you can organise your pages easier when you scroll through them in the pages menu in admin.


So lets now hide page name titles wordpress, I have as most of my tutorials based this on the WordPress Twenty Twelve theme but pretty much will apply to all themes. Now standard warning Use your child theme if you have not created one start reading here first.

Open the original content-page.php from your theme. This should look like below.

Now if you just want to remove the page name from the home page of your site replace is_page with is_front_page , I know a lot of people want to use a static front page so this is a handy one for removing the page name in WordPress just on the home page.

Hiding Page Titles SEO Effect

Are page titles important for SEO, they are less important nowaday’s but still are worth implementing, if you want to understand more about H1 Page titles then this is a great article by Chris Butterworth.

Moving Twenty Twelve Menu to below the Header Image

Moving Twenty Twelve Menu.

I did not like the default way that the header image on the WordPress Twenty Twelve theme is below the menu, I tend to not use the default header text titles on themes as they are what makes a wordpress site look like a blog as opposed to a good quality website.

So on the Klick site I decided to move the Twenty Twelve Menu to below the Header image and use a header image instead of the header text.

moving twenty twelve menu

It is very easy to achieve simply open your header.php in your child theme , If you have not created a child theme the read this first.

Download and open the header.php file from the Twenty Twelve theme, /wp-content/themes/twentytwelve.

Around line 42 you will see the below code.

For moving twenty twelve menu all you do is swap them and place the site navigation (menu) below the header image as below.

Now upload the header.php to your child theme and you should have a new position for the Twenty Twelve menu.