WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] drop down menu on custom page displays all links. Doesn't drop (13 posts)

  1. pdxDaniela
    Member
    Posted 1 year ago #

    I am trying to learn wordpress and create my own them. I added a menu by using:

    PHP Code:
    register_nav_menus( array( $location => $description ) );
    in function.php

    and added
    PHP Code:
    <?php wp_nav_menu() ?>
    in header.php

    yey...it worked I then went to wp-admin section and it recognized that the theme supported a menu. (would like eventually to find out how to make it support more)
    Anyway. created about 12 pages.
    five top pages, two of those have about four drop down pages each.

    My prob.
    the drop down pages are not recognized as such, even though they are properly placed in the wp-admin menu page. All the links display.
    So to fix this:
    Manually by css? thought it would be automatically done by wp. that was the whole point of indenting them?
    What am I doing wrong please?
    thanks
    D

  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Please check that each page used in a Custom Menu does not also have a parent or child page and that the Page Order for all Pages used in a Custom Menu is '0'.

    Each of these can 'conflict'.

  3. pdxDaniela
    Member
    Posted 1 year ago #

    Hello Seacoast and thanks for advising.
    Don't know how to create child pages actually. I did create the pages in the links
    In wp-admin UI. Also were would I find out about the page order please?
    And does wo assigns a default case styling for the menu? I couldn't find it to edit it.
    Thank you
    D

  4. pdxDaniela
    Member
    Posted 1 year ago #

    ok...making a little bit of headway. but stuck here.
    using the class assigned to the menu by wp. but I still can't make the sub-menu hide. Advice anyone?
    thx
    D

    #menu-primary{
    margin-left: 20px;
    }
    .menu  ul{
    border-radius:0 0 20px 20px;
    list-style-type:none;
    
    }
    
    .menu  li{
    position: relative;
    line-height: 30px;
    float: left;
    list-style-type:none;
    background: #000099;
    }
    
    .menu  li a{
    color:#fff;
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    }
    
    .menu li a:hover{
    text-shadow: 0px 0px 9px rgba(255, 255, 255, 1);
    }
    .sub-menu li:hover{
    display:block;
    list-style-type:none;
    }
    
    .sub-menu ul li{
    float: none;
    color: #fff;
    background-color: #000099;
    list-style-type:none;
    }
    
    .sub-menu li{
    position: absolute;
    display: none;
    }
  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Basically 2 styles display a drop-down menu using the wp_nav_menu function;

    ul ul {
     display: none;
    }
    
    ul li:hover ul {
     display: block;
    }
  6. pdxDaniela
    Member
    Posted 1 year ago #

    Thank you Andrew. so for example it should be
    .sub-menu ul ul {
    display: none;
    }

    &

    .menu ul li:hover ul {
    display: block;
    }

    ? running to try it out & crossing fingers.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

  8. pdxDaniela
    Member
    Posted 1 year ago #

    yeah...dint' work.
    You maybe right about the specificity,but I am working w/the classes given by wp...so not quite sure how to deal with it.

    thank you though.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you provide a link to your webpage with the issue?

  10. pdxDaniela
    Member
    Posted 1 year ago #

    no sorry. actually using a sandbox. Is there some other info I could provide?

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    How about links to two PasteBin pages, each with your HTML and CSS for one given webpage.

  12. pdxDaniela
    Member
    Posted 1 year ago #

    I'll go take a look never used/heard of paste bin before.

  13. pdxDaniela
    Member
    Posted 1 year ago #

    K kept tinkering and managed to fix it.

    .menu li li{
    float:none;
    display: none;
    }

    .menu li:hover ul li{
    display: block;
    }

    I just ignore the sub menu by it's class name and just addressed the ul/li as sub components. So far so good!.
    thank you for your advice!
    Next I need to link the menu links to categories! please drop me a line if you have a link or advice for that!

Topic Closed

This topic has been closed to new replies.

About this Topic