0

So long story short, im a noob WP dev and im like on my 2nd custom WP site so sorry if i sound a bit lost.

As i was doing my first WP custom site, i noticed that for example, on the default theme and any other themes i tried out, when you add a menu item that has child options, they wrap under the parent option, think drop down menu. or like this

PARENT OPTION-1  PARENT OPTION-2  PARENT OPTION-3
 CHILD OPT 1
 CHILD OPT 2

etc, Now when making my own theme, when i manually put in the <?php wp_nav_menu(); ?> hook and add in the menu items dynamically via WP cpanel, my menu child items come out like this

PARENT OPTION-1                    PARENT OPTION-2  PARENT OPTION-3
       CHILD OPTION1    CHILD OPTION2

As you can see, parent option 1s child menu options are horizontal, and the other menu parent items get pushed way to the side.

Now when i leave menu items without child menu items, then the menu looks fine, its when child options are added that it becomes wonky.

What im wanting to know is, what can i do to make it like it appears in the default themes? you know, to make it work like normal?

Any tips/tricks/links and good explanations/help etc i gladly appreciate.

EDIT***

looking at this deeper, the child menu items always show as opposed to only displaying on parent items mouseover.

Thanks in advanced. http://somdowprod.net/

Improve this question
5
  • Close-voted as off-topic. This is a CSS question, not a WordPress question.
    – Chip Bennett
    Apr 12, 2012 at 12:45
  • this is a wordpress quesiton because although CSS issues are being pointed out, there are other issues as im being made aware of that have to do with menu items showing up even though theyre not being rolled over. So id appreciate not closing this, if anything move it or spread it around to css too...otherwise id just open another one and i dont want to post doubles.
    – somdow
    Apr 12, 2012 at 12:48
  • Its likely still a CSS related issue mate... WordPress itself won't cause your drop down menu to appear as a block element. You need to control that via your CSS. Please see my extra comments below.
    – Adam
    Apr 12, 2012 at 12:53
  • understood. and yep got it below, thanks all for help/suggesitons. how can i then move this to css or make it css related? again thanks
    – somdow
    Apr 12, 2012 at 12:55
  • Pure CSS questions belong to Stack Overflow. Rule of thumb: If you can take WP out of the question and the problem remains: it is not a WP problem. ;)
    – fuxia ♦
    Apr 12, 2012 at 17:57

2 Answers 2

Reset to default
4

This appears to be a CSS related issue.

You need to clear:both your <li> elements which contain your <a href=links...>

Make sure you apply that clear property to your sub-menu <li> elements only and not your top level parent items.

Without knowing or seeing the exact theme you are working with, be it custom or not, I can't say for sure that this is your problem but going from your diagram its a safe bet that's where you need to be looking.

Improve this answer
7
  • Hello Userabuser, i thought the same thing but, the problem is, since the menu gets bought in via the wp_nav_menu hook dynamically, then how can i target anything like that? for example, the menu options will have weird names and numbers that get made up on the fly so you know....how can i accomplish this...if there is anything you need from me let me know, thanks
    – somdow
    Apr 12, 2012 at 12:27
  • Very easily actually. Although menus do get created on the fly, they also get assigned properties which are static and unique onto themselves as well as diverse enough for you to select and style each element without having to resort to more advanced methods of menu control, certainly not for a simple situation like we have here. Your menu should have a parent <ul> class of .menu (or similar). Therefore to control the the children elements you would in effect do something like: .menu ul li ul li {clear:both;} the first <ul> is the parent class, the first <li> is the parent menu item
    – Adam
    Apr 12, 2012 at 12:42
  • i took a stab at it eitherway and it worked better, the items are falling under each other, the parent items are still being pushed to the side about half the distance from the sample above. Also, i edited my main original post, um, the child elements always show as oppose to only showing on parent items rollover...what do you think the problem is? Thanks for your help
    – somdow
    Apr 12, 2012 at 12:43
  • The second <ul> which is your sub-menu is being targeted only if a descendant of the parent <li> element. Then the very last <li> element (which is what we are selecting) is being called but only as a child of the sub-menu. So there is a clear order of declaration here as we are specifying the where-about of our element in which we want to manipulate. Now this is basic styling but if you need more help just share your link and I'll point it out for you.
    – Adam
    Apr 12, 2012 at 12:44
  • Well i dont have a link just yet, i mean i do but that live site doesnt have child elements on their menu, id have to upload it to a test portion of my server which ill do a bit later today. again thanks...oh and another quick ? for ya the child elements always show as oppose to only showing on parent items rollover...what do you think the problem is? Thanks for your help
    – somdow
    Apr 12, 2012 at 12:46
0

The WordPress-relevant part of this question involves knowing what contextual CSS classes WordPress applies to each menu item:

  • All menu items:
    • .menu-item, .page-item, .menu-item-{posttype}
  • Current Page
    • .current-menu-item, .current_page_item, .current-{posttype}-item
  • Current Page Parent
    • .current-menu-parent, .current_page_parent, .current-{posttype}-parent
  • Current Page Ancestor
    • .current-menu-ancestor, .current_page_ancestor, .current-{posttype}-ancestor

Knowing these classes, you should be able to style your navigation menu however you'd like, including dropdown/flyout menus.

Improve this answer
2
  • Hello Chip and thanks for your assistance. I have a 2 more questions 4 u, i know these are dynamically created for wp on load (i assume) but, (question1) are these declared anywhere on WP by default? like is there a parent CSS file i can make edits to or do i create/edit them on my own css even though they dont exist yet but will on program load? (question2) when i install other themes, are these always the same or case by case basis? Thanks
    – somdow
    Apr 12, 2012 at 13:30
  • I don't understand your first question. Front-end styles are determined/defined entirely by the Theme. WordPress dynamically adds classes to the output, but unless you apply styles to those classes, then the classes will be unstyled. Regarding your second question: front end styles are entirely Theme-dependent. Each Theme must define styles for all classes - WordPress-generated or otherwise - on its own.
    – Chip Bennett
    Apr 12, 2012 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.