Title: How to implement navigational menu code? Last modified: August 19, 2016 --- # How to implement navigational menu code? * Resolved [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/) * Hi all, * I’ve created a working html/css horizontal navigation menu using a text editor. In the file, I have the CSS styling at the top and the html for my menu at the bottom. * It works the way it’s supposed to when I do a web preview in TextMate. * Now I’d like to add it to my site, but I’m not sure what the best way to do this is. * Should I add the relevant CSS code in my theme’s style sheet and then paste the html code in my header file? * Or should I upload the working menu as a single file to my theme files and “call” that from the header? If so, do I create a php file for this purpose, or should it be an html file? How would I call the menu? * Any advice would be much appreciated. Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/page/2/?output_format=md) [→](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/page/2/?output_format=md) * [ambrosite](https://wordpress.org/support/users/ambrosite/) * (@ambrosite) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462594) * You should consider using WordPress to manage your navigational links. I have used this technique (with small modifications) on my own site, and it works well. There is an article here that explains how to do it: * [http://justintadlock.com/archives/2009/01/06/easy-navigation-menus-in-wordpress](http://justintadlock.com/archives/2009/01/06/easy-navigation-menus-in-wordpress) * If you don’t want to go that route, then yes, simply pasting the HTML code into your header.php should work, since you want the navigation to appear consistently on every page. * [Shane G.](https://wordpress.org/support/users/shane-g-1/) * (@shane-g-1) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462606) * Hi, * Refer this article for navigation links: * [http://codex.wordpress.org/Good_Navigation_Links](http://codex.wordpress.org/Good_Navigation_Links) * Also refer these articles: * [http://wordpress.org/extend/plugins/wordpress-navigation-list-plugin-navt/](http://wordpress.org/extend/plugins/wordpress-navigation-list-plugin-navt/) [http://wordpress.org/extend/plugins/multi-level-navigation-plugin/](http://wordpress.org/extend/plugins/multi-level-navigation-plugin/) * Thanks, * Shane G. * Thread Starter [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462609) * Thank you Ambrosite. * That article looks interesting, though it says that drop down menus aren’t easy using that method…. * I have a horizontal menu of 10 items, with 6 of them having drop downs of 1 to 5 items each. I made the menu the exact width of my page (980 px). * I looked at the Codex and it says short menus are OK in WordPress but that longer ones can run into problems with layout. * I added the CSS to my style sheet and tried pasting the html part of the code into the bottom of the header, but the menu doesn’t display as nicely as it did in TextMate web preview, i.e. the font size appears much smaller, despite the CSS styling. * Also tried pasting it in the Main Index Template, after the call for the header, then within the wrapper, but could not get it to work (did not display at all). * Thread Starter [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462610) * Shane, thanks for those links. Maybe I should find a plugin… * My site is a “static site”. I had previously looked at the PixoPoint Dropdown Menu plugin but couldn’t find a way to create side-by-side dropdowns for different groups of pages. And after scouring their forums it seems lacking in user documentation and support. * So I just spent the last 24 hours struggling to create my navbar from scratch… Finally got it to work, but it looks like I won’t be able to use it on my site after all 🙁 * [ambrosite](https://wordpress.org/support/users/ambrosite/) * (@ambrosite) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462612) * If the font size appears much smaller, it is probably because of nested relative font sizes. That is, if you nest the menu inside a web page where the font-size on the body has been set to 62.5% (a common technique in WordPress themes), then your menu fonts will be 62.5% of the size you expect them to be. You can counteract that by setting the font-size on your menu to something like 160% (play around with different percentages to find the right value). * Thread Starter [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462614) * OK, thanks for that tip. I’ll give it a try. * Just looking at those plugins, and they seem too complicated for me. I’d rather find a way to get my own menu to work if at all possible. * Thread Starter [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462629) * Tried changing the font-size to 140% then 160% but this made no difference to the small text size, though what you say makes sense (in my theme the text is set to 62.5%…) * I have other problems too, i.e. with the super small text, there seems to be a lot of extra space showing up above and below lines of text in the menu items, causing it to overflow beyond the bottom border of the menu… * For example, some of my menu items had text on two lines within a menu bar height of 37px. When I paste my code into my header as is, the text shrinks, yet the second line appears below the bottom of the actual menu bar (seems like extra padding). So when I hover one one item, the dropdown of that item runs into the overflow of the second item…. * Hmm, I guess it’s back to the drawing board… * [ambrosite](https://wordpress.org/support/users/ambrosite/) * (@ambrosite) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462636) * Are you sure you’re targeting the menu correctly with your CSS selector? Changing the font-size should definitely have had some visible effect, unless the change is being overridden by some other selector with higher specificity elsewhere in the CSS file. What if you change some other attribute like color? Does that have any effect? * Thread Starter [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462637) * This is literally my first attempt at composing CSS and I’m not sure what you mean by “targeting the menu correctly”…. * I followed this online tutorial ([http://www.plainshanedesign.com/cssdropdown.html](http://www.plainshanedesign.com/cssdropdown.html)) and watched the entire 20-minute video at least 5 or 6 times, writing my code in real-time according to the instructions, then checked and verified everything several times until I got it right. * It’s actually working perfectly in TextMate. * I have a feeling it’s just a small thing that’s keeping it from display properly in my site, but not sure how to troubleshoot it. * Thread Starter [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462639) * I’ve pasted the CSS code for my list [here](http://pastebin.org/148939) if anyone would care to have a glance. * This is the CSS I added to my theme’s stylesheet (after the footer stuff). * [ambrosite](https://wordpress.org/support/users/ambrosite/) * (@ambrosite) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462640) * I’m willing to look at this, however I need to see the entire CSS file for your theme, as well as the HTML. Is this site online somewhere I can get to it? * Thread Starter [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462641) * Thank you! My site is [here](http://www.chocoparis.com) * The CSS file is[ here](http://www.chocoparis.com/wp-content/themes/ProSense/style.css) * I haven’t got the menu html posted in there at the moment, since it looks so bad. Should I post it in the header or in some other theme file? * [ambrosite](https://wordpress.org/support/users/ambrosite/) * (@ambrosite) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462643) * Yes, please post the menu HTML somewhere. I need to see how it is marked up. Actually, if you wouldn’t mind, please put it back in the header where you had it before, so I can see how it is being nested. * Thread Starter [lutetia](https://wordpress.org/support/users/lutetia/) * (@lutetia) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462645) * OK, I’ve put it back in the header (at the bottom). * I should probably add more space before the content. * [ambrosite](https://wordpress.org/support/users/ambrosite/) * (@ambrosite) * [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/#post-1462649) * I see the problem. You have two selectors that are both targeting the “nav” id. The second selector is around line 290 in your CSS file, and it has an absolute font-size of 10px which is overriding the percentage font-size you set on your menu. The duplicate id is probably causing all of the other formatting problems as well. * My suggested solution is to rename the “nav” id in your menu to “navmain”. You must then rename all the “#nav” selectors in your CSS to “#navmain”. That should solve the problem. Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/page/2/?output_format=md) [→](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/page/2/?output_format=md) The topic ‘How to implement navigational menu code?’ is closed to new replies. ## Tags * [menu code](https://wordpress.org/support/topic-tag/menu-code/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 19 replies * 3 participants * Last reply from: [ambrosite](https://wordpress.org/support/users/ambrosite/) * Last activity: [16 years, 2 months ago](https://wordpress.org/support/topic/how-to-implement-navigational-menu-code/page/2/#post-1462657) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics