Codeable info

WordPress Navigation Menu for PCs and Mobile Devices

Posted on by in WordPress Tutorials

Building a custom navigation menu in WordPress has several challenges. I will cover some of them in this tutorial. The main focus will be on building custom navigation menus for the iPhone and other mobile devices. However, the menu will also work for regular PC users as well. If you don’t need the part for mobile devices, you can simply skip those parts and still learn how to build a nice top navigation menu for your WordPress blog. The menu I develop in this tutorial is a fixed positioned menu, meaning it stays at the top of the browser window even when you scroll. It can be easily adapted to not stay at the top at all times as well. I will explain how to do that later on.

Building a Custom Top Navigation Menu in WordPress

Before you can customize your custom navigation menu for mobile devices, you have to build it. Makes sense, right? I normally start by building the navigation menu for normal PC users and the Firefox browser. I build and test in Firefox first because it is the most standards compliant browser to date in my opinion. Then of course I optimize it for Internet Explorer since it is the most commonly used of all browsers today. Here is an example of a custom top navigation menu I did for a recent client of mine:

nav menu

What I did was used the client’s logo image on the top left and made an expanding space in between the logo and the navigation menu on the right. Designing the navigation menu is up to you, but if you want to do it as I did in the above image, I used a graphics editor to make my vertical text and gray line images and put them all in an absolutely positioned div. Then I used another div for each of the three columns in my navigation menu. I played with the spacing until I got it to match the PSD design I was working from. You can do that by playing with the margin-left or margin-right attributes in the CSS as needed. Here is the HTML that made the above navigation menu. The following code should go in your current theme’s header.php file located in that theme’s main directory which is in the “themes” folder:

The HTML

<header id="header">
			<a id="logo" href="<?php echo get_option('home'); ?>/"></a>
 
<div id="topnavpics">
 
 
 
</div>
 
<div id="linkholder">
 
<!--############################### STILL LINKS: ##############################-->
<div id="topnav_still" class="topnavlinks">
<span id="still_space"></span>
New<BR />
Portfolio<BR />
Series<BR />
</div>
<!--############################# END STILL LINKS ############################-->
 
<!--############################## MOTION LINKS: #############################-->
<div id="topnav_motion" class="topnavlinks">
<span id="motion_space"><BR /></span>
Reel<BR />
Motion<BR />
</div>
<!--############################ END MOTION LINKS ###########################-->
 
<!--############################## INFO LINKS: ################################-->
<div id="topnav_info" class="topnavlinks">
<span id="info_space"></span>
About<BR />
Contact<BR />
<a class="toplink" id="info3" href=""><span style="color:#009ce3" onmouseover="this.color='#939598';">BLOG</span></a><BR />
</div>
<!--############################# END INFO LINKS #############################-->
</div><!--end linkholder div-->
</header>

The CSS

That wraps up the HTML, now here is the CSS to go with it. You can add the following CSS code to your current theme’s style.css file located in the main directory of the theme:

#topnavpics{position:fixed;top:1px;right:80px;width:540px;/*was 570px*/height: 127px;padding-top:12px;background-color:transparent;z-index:105;}


 
#nav1{margin-left:61px;}
 


#nav2{margin-left:185px;} 


 
#nav3{margin-left:144px;}
 


.topnavlinks{

 
position:relative;margin-top:5px;color: #939598;line-height:0.9;margin-left:-32px;font-family:'Conv_Gotham-Bold';font-size: 24px;}
 


#logo{position:fixed;top:6px;left:70px;z-index:101;}
 


#header a{color: #939598;text-decoration:none;}

#header a:hover{color: #009ce3;text-decoration:none;}
 


#linkholder{position:fixed;top:1px;right:48px;width:540px;height: 127px;padding-top:12px;background-color:transparent;z-index:105;border:0px solid red;}
 


#topnav_still{position:absolute;top:41px;left:81px;z-index:112;}
 


#topnav_motion{position:absolute;top:41px;left:289px;z-index:114;}
 


#topnav_info{position:absolute;top:41px;left:458px;z-index:114;}

That does it for the CSS. Notice how I used the fixed positioning on the main containers for the top navigation menu because I didn’t want my menu to leave the top of the page. This menu will stay at the top of the browser window even when the user scrolls down. If you don’t want that behavior for your site’s navigation menu, simply change all of the fixed positioned elements in the CSS above to absolute positioned elements.

Custom Links for Mobile Devices

Okay, so far everything is fine and dandy for regular PCs, but we need to do a little magic for iPhones, iPads and other mobile devices. The following code assumes you will have some different links for mobile devices as many user friendly sites do these days. If you do not have separate pages for mobile users on your site, this code is not necessary for you. If you do have different pages for mobile users insert the following JavaScript in the head of your header.php file to change the links in the top navigation menu dynamically with JavaScript. Here is the code I used:

<script>

function mobileLinks(){

//set new links for mobile users:

var still_1 = "http://www.example.com_1";

var still_2 = "http://www.example.com_2";
var still_3 = "http://www.example.com_3";

var motion_1 = "http://www.example.com_4";

var motion_2 = "http://www.example.com_5";

var motion_3 = "http://www.example.com_6";

var info_1 = "http://www.example.com_7";

var info_2 = "http://www.example.com_8";

var info_3 = "http://www.example.com_9";


 
//get still links and change:

var still1 = document.getElementById('still1');

var still2 = document.getElementById('still2');

var still3 = document.getElementById('still3');

still1.href=still_1;

still2.href=still_2;

still3.href=still_3

;
 
//get motion link and change:

var motion1 = document.getElementById('motion1');

var motion2 = document.getElementById('motion2');

motion1.href=motion_1;

motion2.href=motion_2;


 
//get info links and change:

var info1 = document.getElementById('info1');

var info2 = document.getElementById('info2');

var info3 = document.getElementById('info3');

info1.href=info_1;

info2.href=info_2;

info3.href=info_3;

}//end mobileLinks function that changes links to main site for mobile devices.

if( isMobile.any() ) window.onload = mobileLinks;

</script>

For anyone familiar with JavaScript, the above code is fairly self explanatory. For those of you that are not so familiar with JavaScript, the code simply allows you to insert your own links in the first several lines starting with variable “still_1” and ending with variable “info_3”. Simply change the example.com links to your links for mobile devices. Take note how the anchor elements are called by the getElementById function and be sure to use the proper ids here in case you didn’t use my exact HTML code from above.

Summary

After reading this fairly simple tutorial on building a custom top navigation menu for your WordPress site, you should be aware of what is necessary for dynamic menus that change for mobile devices. You should also know how to make a nice fixed positioned or absolute positioned top navigation menu for PCs as well. I hope you learned something here today and keep on blogging!

)
Codeable info

Comments (1)

Comment by obure barnabas says:

please how do i join the css html and the rest to gether with my mobile theme???

Codeable info