codemonkey313 — 2013-02-20T15:13:00-05:00 — #1
I am attempting to figure out how to modify the default wordpress nav menu system.
the modification is actually very simple - i want to change the id's and classes that the nav menu system uses.
trouble is, i cant seem to find the php files that generate the html for the nav menu (which would tell it what id's and classes apply).
i have a pre-existing nav menu and i want to make the wordpress nav look and behave exactly like this pre-made one.
the css structure is different enough that i thought the easiest way would be to change the id's and classes used by wordpress
can someone point me in the proper direction?
in the screenshot, the top menu is the pre-existing one (how i want it to look)
the bottom menu is the wordpress nav (the way it looks right now)
what cant be seen in the screenshot is the hover effect (simple image swap with css)
the site is americanindustrialinc.com/wp
ronalds — 2013-02-20T17:33:38-05:00 — #2
Why not override default css classes and id's with your own styles for menu?
If you want to dig into code, WordPress codex has all the info needed.
codemonkey313 — 2013-02-21T09:13:36-05:00 — #3
Well i was trying to do that but its structured very differently and im having serious difficulty figuring out where to properly apply my styles.
i thought if i could change the classes and id's it would save time.
Ill check the codex.
codemonkey313 — 2013-02-21T14:35:19-05:00 — #4
Ok. Ive managed to get it about 90% of the way, and ive been trying to avoid asking for more help, but i just cant figure this part out.
On the lower navigation on my page (americanindustrialinc.com/wp) which is the wp nav system, the right side has some extra space that i cant figure out how to eliminate.
i have adjusted the padding between the buttons (for lack of a better term) as much as possible to fill up the space, but there is also a margin that is preventing me from adjusting it any further
and i cant figure out what is generating the margin or why the div has the background at all, when (according to my css rules) only the <a> element is supposed to have the background.
i have tried everything i can think of and nothing seems to be working. i need to finish this by end of week (5pm eastern time friday).
can somebody point me in the right direction please?
codemonkey313 — 2013-03-05T09:48:32-05:00 — #5
It all worked out when i stopped using padding to set my width and used actual pixel width.