Responsive WordPress CSS Menu

Posted on September 2, 2013 11:39 am in
Share on Facebook1Tweet about this on TwitterShare on Google+0Share on LinkedIn0

Making your responsive WordPress css menu isn’t as hard as you think. With simple CSS you can make a menu that automatically changes to a dropdown menu when the screen size changes below a certain pixel size.

I made the responsive WordPress CSS menu on this website the same way so just minimize your browser window width or check it out on a mobile phone to see it in action.

The Concept:

The concept is to use @media screen to change the menu to a dropdown menu when the screen goes below 600px.

First of all, we need to make 2 menu styles in the CSS stylesheet, ‘menu’ (Shows when the screen size above 600px) and ‘mobile-menu’ (Shows below 600px).

The Menu Style CSS

Menu CSS

.menu {
text-align:left;
display:inline;
}

.menu ul {
list-style: none;
padding: 0;
display:inline;
}

.menu li
{
float: right;
list-style: none;
display:inline;
}

.menu li a
{
padding:20px 10px 20px 10px;
background-color:#3297da;
display: inline;
float: right;
width: 6em;
display:inline;
color: #fff;
text-decoration: none;
text-align: center;
}

.menu li a:hover
{
padding:20px 10px 20px 10px;
background-color:#258ace;
display: inline;
width: 6em;
display:inline;
color: #fff;
text-decoration: none;
text-align: center;
}

Mobile Menu

.mobile-menu {
background-color:#5dade2;
padding:10px;
text-align:center;
font-size:20px;
color:#fff;
}

.mobile-menu select {
margin-top:10px;
}

Let’s make it responsive

Ok so now we’ve styled the 2 menus, let’s create the command so when the screen goes below 600px, it changes to ‘.mobile-menu’:

@media screen and (max-width: 600px) {
.mobile-menu {
display:inline-block;
}

.menu {
display:none;
}
}

Now The HTML / PHP

Ok so now all the styles are done and the command to swap menus is now complete. Now all we have to do is to put the HTML/PHP in our theme to show the thing!

The HTML/PHP in our theme is placed in our ‘header.php’.

<!————- Make Page Responsive ————->

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<!————- Mobile Header ————->

<form action=”<?php bloginfo(‘url’); ?>” method=”get”>
<?php wp_dropdown_pages(); ?>
<input type=”submit” name=”submit” value=”view” />
</form>

<!————- Menu  ————->

<?php wp_nav_menu(); ?>

Done!

And that’s it! All we had to do is style the menus, put the responsive command in place to hide one and show the mobile menu and then pop it in our theme and then you have your responsive WordPress css menu!

See It In Action

Minimize the screen on this page or view it on your mobile/tablet device. The responsive WordPress css menu will change when the screen size is below 600px!

Share on Facebook1Tweet about this on TwitterShare on Google+0Share on LinkedIn0
< Previous Post
Next Post >

Leave a Reply

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

I’ve been a freelance web designer since the age of 10 and I’ve learnt a few things along the way. I’ve been brought up with the internet and how to create with it. From this, I’ve got over 12 years experience in the web design industry which is unique.

Now I specialise in WordPress and responsive web design. I chose WordPress as it is the most user friendly and diverse CMS system out there and everything I make is responsive as standard. As a freelance web designer, I’m always looking at staying ahead of the game.

I specialise in responsive Wordpress websites and pixel perfect designs.
"The product has turned out to be truly unique and exactly what I wanted, both aesthetically and functionally. I cannot begin recommending him enough for any developing project, he's just the best!"
Katy Kann
View Project
Let's make your vision come to life
I've put together an easy form to get us started
Freelance Web Designers in the UK