How to Move the Navigation Bar to the Header in WordPress
If you want to free up space on the sidebar so you can place other widgets or ads there, or simply feel like a change, you can move your navigation bar from your sidebar to the header in your WordPress blog. Because this task involves using the WordPress Theme Editor, you'll need administration permissions to complete it. Additionally, some HTML and CSS experience would be useful.
Other People Are Reading
Instructions
-
-
1
Log in to your WordPress admin control panel. Click "Appearance," then click "Editor." From the list of files on the right, click "sidebar.php."
-
2
Locate the navigation bar for your site. This is either a line of code starting with "<?php wp_nav_menu" or a manual list of the links on your menu. Either way, cut the code including any surrounding <div> tags and paste them into a text file. Click "Update File" when you're done.
-
-
3
Click "header.php" from the list on the right on the admin control panel. Locate the main title or masthead for your site and start a new line beneath that and the next section of code, which will probably be a line calling your sidebar. Paste the code for the menu that you previously pasted in your text file.
-
4
Add a "2" to the name of the containing <div> of the navigation menu. You'll be making changes to this divider, so create a new one so that any other menus on your site that might use the same divider won't also be changed. For example, if the divider looks like this:
<div id="sidemenu">
Change it to:
<div id="sidemenu2">
-
5
Click "style.css" from the list on the right on on the admin control panel. Scroll down until your find the code for the original <div> tag for the menu. It starts with a hash sign, for example:
#sidemenu {
Copy all of the code for this section, including the closing "}" character, and paste it into a new line of the file. Then add a "2" to the new section you have pasted. If you know CSS, you can now add any styling to the menu to this new section. At the least, add "display:block; width:100%;" without quotations if this code isn't already present. This will put your navigation menu on its own line and spread it across the length of the header.
-
6
Start a new line in the file and paste in the folloing code:
#sidemenu2 li {
float:left;
}
Replace "sidemenu2" with the actual name of your menu. This arranges your menu horizontally across your header. Again, you can add any additional CSS code here to change the appearance of the individual menu items.
-
1
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
