WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] drop down menu on custom page displays all links. Doesn't drop

[Resolved] drop down menu on custom page displays all links. Doesn't drop

  • pdxDaniela
    Member

    @pdxdaniela

    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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Pioneer Web Design
    Participant

    @swansonphotos

    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’.

    pdxDaniela
    Member

    @pdxdaniela

    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

    pdxDaniela
    Member

    @pdxdaniela

    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;
    }
    Andrew Nevins
    Forum moderator

    @anevins

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

    ul ul {
     display: none;
    }
    
    ul li:hover ul {
     display: block;
    }

    pdxDaniela
    Member

    @pdxdaniela

    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.

    Andrew Nevins
    Forum moderator

    @anevins

    pdxDaniela
    Member

    @pdxdaniela

    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.

    Andrew Nevins
    Forum moderator

    @anevins

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

    pdxDaniela
    Member

    @pdxdaniela

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

    Andrew Nevins
    Forum moderator

    @anevins

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

    pdxDaniela
    Member

    @pdxdaniela

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

    pdxDaniela
    Member

    @pdxdaniela

    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!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] drop down menu on custom page displays all links. Doesn't drop’ is closed to new replies.