Dropdown menu not dropping down to show child pages

  • Resolved Johnny Bravo

    (@herbiehysteria)


    11 years, 3 months ago

    Hi guys, I have added a page as the child page of ‘Accident Claim Types’. I have then added this to my main menu as the child, so it’s indented to the right under Appearance> Menus.

    However, nothing seems to happen on the front end, i’m thinking the CSS needs tweaking to my menu classes but i’ve tried a few changes without success. Can any CSS experts guide me to which classes I need to be looking at.

    my site: http://globalaccident.net

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    It looks like you need to add this CSS;

    #menu.ddsmoothmenu li:hover ul {
 visibility: visible;
 display: block;
 top: 20px;
}

    Thread Starter Johnny Bravo

    (@herbiehysteria)

    11 years, 3 months ago

    hi andrew, i’ve added that but still no change, absolutely nothing happens. it seems like it should work already, because the menu classes in my stylesheet are inundated with ‘parent’ and ‘child’ terms everywhere

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    Whereabouts did you add it? It’s not showing up on your webpage.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    If the sub-menu is working on the demo website for that theme, consider disabling plugins to explore whether any are responsible.

    Thread Starter Johnny Bravo

    (@herbiehysteria)

    11 years, 3 months ago

    ive definately added it lol, in style.css – refresh?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    Sorry, can you replace this;

    #menu.ddsmoothmenu li:hover ul {
 visibility: visible;
 display: block;
 top: 20px;
}

    With this;

    #menu .ddsmoothmenu li:hover ul {
 visibility: visible;
 display: block;
 top: 20px;
}

    Thread Starter Johnny Bravo

    (@herbiehysteria)

    11 years, 3 months ago

    that works better, but can i get the sub-menu pages to appear the same as the main menu items, shape and hover effect? thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    Sure, try using a browser developer tool for this kind of exploratory CSS work.
    I use Google Chrome’s built-in Developer Tool and found the CSS of your main menu items [screenshot].

    Now that you know the style, from being exposed by the Developer Tool, you can add a new style in your Child Theme stylesheet to override it.

    Edit: CSS-specific support should be sought on CSS-specific forums

    Thread Starter Johnny Bravo

    (@herbiehysteria)

    11 years, 3 months ago

    i use the same in chrome and firebug in firefox but styling this dropdown to appear the same as the main menu items is a bit too advanced for my css skills, i can see where i need to edit the css but i’m not very confident as to which classes need changing

    #menu li a {
    margin:0;
    margin-left:10px;
    padding-left:8px;
    padding-right:18px;
    padding-top:4px;
    padding-bottom:5px;
    position:relative;
    float:left;
    color:#666;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    text-decoration:none;
    font-size:12px;
    background:url('images/nav.png') no-repeat 99% -4px;
    text-shadow: 0 1px 0 #ffffff;
}
#menu li.current-menu-item a, #menu li.current-menu-parent a, #menu li.current_page_parent a, #menu li a.selected, #menu li a:hover, #menu li.current_page_item a {
    margin:0;
    margin-left:10px;
    padding-left:8px;
    padding-right:18px;
    padding-top:4px;
    padding-bottom:5px;
    color:#FFF;
    text-shadow: none;
}
#menu .ddsmoothmenu {
    margin:0;
    padding:0;
    list-style:none;
    float:right;
    position:relative;
    z-index:10000;
    margin-top:8px;/*	margin-left:60px;*/
    margin-left:30px;
    margin-top:10px;
}
#menu .ddsmoothmenu li > ul {
    background: url("images/submenu-down.png") no-repeat;
    background-position: -2px 100%;
    border-right:1px solid #CCC;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;

    i’m not using a child theme yet, im wanting to create that once the functionality of the site is complete and i’m onto adding the content

    thanks

    Thread Starter Johnny Bravo

    (@herbiehysteria)

    11 years, 3 months ago

    the dropdown menu appears too tight underneath the main menu parent page button ‘Accident Claim Types’ which makes the text in the button ‘bold’ when i hover over the child pages, i have tweaked the above css by adding top: 25px; which DOES remedy this but then the child pages dont appear smoothly and the hover effect doesn’t work

    can any css experts see where i’m going wrong, it’s literally a couple of pixels worth of editing

    http://globalaccident.net

    WPyogi

    (@wpyogi)

    11 years, 3 months ago

    ‘m not using a child theme yet, im wanting to create that once the functionality of the site is complete and i’m onto adding the content

    That’s a mistake — you will have to redo a lot of your work – as not everything carries over when you change to a child theme. And the CSS file for your child theme should contain ONLY your changes, not then entire parent file.

    Thread Starter Johnny Bravo

    (@herbiehysteria)

    11 years, 3 months ago

    wpyogi, yes you’re right, i went ahead and made the child theme, and updated my parent theme, it seems a css padding/margin edit i did earlier in the parent theme, to lessen the white space between the featured content and footer was causing the mis-alignment on the drop-down

    everything ok now, thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Dropdown menu not dropping down to show child pages’ is closed to new replies.