Navigation drop down menu

  • SmartRobbie

    (@smartrobbie)


    11 years, 10 months ago

    Hi, I was wondering if someone can help.

    trying to work out which bit of code to change to make the drop down menus on this site work (or is the code something else, not what is listed below)?

    site is: http://raymondneto.com/

    /***********************
 Navigation
***********************/

#phone-menu {display: none;}
    /*Undo twentytwelve styles*/
    .menu {display: none;}

    .main-navigation {
        margin-top: 0;
        text-align: center;
    }
    .main-navigation li {
        margin-top: 0;
        font-size: .7em;
        line-height: 1em;
    }
    .main-navigation a {
        color: #000000;
    }
    .main-navigation a:hover {
        color: #ffffff;
    }
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        display: none;
    }
    .main-navigation ul.nav-menu.toggled-on,
    .menu-toggle {
        display: none;
    }

    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {border: none;}

    #nav-wrap { display: block; margin-top: 0; }
    #menu-main-menu {text-align: center;}

    ul, menu, dir {
    display: block;
    list-style-type: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0;
    }

#site-navigation {
    display: block;
    position: fixed;
    background: url(_images/concrete-top-pattern.png) repeat-x;
    top: 0;
    width: 100%;
    height: 100px;
    min-height: 100px;
    margin-top: -20px;
    text-align: center;
    z-index: 5000;
    }

#menu-main-menu {
    display: block;
    width: 100%;
    margin: 0 auto;
    }    

#menu-main-menu li {
    height: 65px;
    font-family: freefonts;
    display: inline-block;
    list-style: none;
    margin: 0;
	opacity:0.9;
	filter:alpha(opacity=70); /* For IE8 and earlier */
	font-size: 1.5rem;
    text-align: left;
    text-transform:uppercase;
    margin-top: 10px;
    margin-right: 100px;
    vertical-align: top;
	}	    

    li#menu-item-33 {
       background: url(_images/posing-figure-sprite.png) no-repeat;
       background-position: 0px 15px;
       padding-left: 35px;
       height: 65px;
       } 

    li#menu-item-33:hover {
       background: url(_images/posing-figure-sprite.png) 0px -45px no-repeat;
       } 

    #menu-main-menu li:nth-child(5) {
    margin-right: 0;
    }

#site-navigation a:hover,
nav a:focus, nav a:active { color: #ffffff;}

#menu-main-menu li:focus,
#menu-main-menu a:focus  {
    color: rgba(44,131,193,1);
     }
Viewing 8 replies - 1 through 8 (of 8 total)
  • Nikhil Chavan

    (@nikschavan)

    11 years, 10 months ago

    add this following code to your CSS file –

    .main-navigation ul li > ul {
display: none !important;
}

.main-navigation ul li:hover > ul {
display: block !important;
}

    I think you have installed some plugin for dropdown menu, that’s adding inline CSS to menu items, the above code should fix the issue, or you can try disabling that plugin.

    Hope this helps!

    Thread Starter SmartRobbie

    (@smartrobbie)

    11 years, 10 months ago

    Thanks that seems to have done the trick! would you happen to know how to reduce the spacing between the menu items? There seems to be about a 30px gap between the items. If you don’t that is ok!

    Nikhil Chavan

    (@nikschavan)

    11 years, 10 months ago

    Here you go – 

    .main-navigation ul li > ul li {
    margin-right: 0 !important;
    height: auto !important;
    margin-top: 10px !important;
}
.main-navigation ul li > ul li a {
    line-height: 1.7em !important;
}

    if you want to change the spacing sub-menu items, change the margin in .main-navigation ul li > ul li. if you want to change line spacing, change line-height: 1.7em !important;.

    Hope that helps!

    Thread Starter SmartRobbie

    (@smartrobbie)

    11 years, 10 months ago

    perfect thank you!

    Thread Starter SmartRobbie

    (@smartrobbie)

    11 years, 10 months ago

    Hi Nikschavan,

    quick question, it seems to fix the drop down when you first view the drop down menu, but if you view it, then take the mouse off the menu, then put it on again, all the drop downs come down.

    Any suggestions?

    Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 10 months ago

    Try getting rid of the !important declarations

    Thread Starter SmartRobbie

    (@smartrobbie)

    11 years, 10 months ago

    Hi Andrew,

    Thanks for the quick reply, sadly it seems to be doing the same thing still.

    Robyn

    Thread Starter SmartRobbie

    (@smartrobbie)

    11 years, 10 months ago

    Hi Nikschavan, thank you for that. I did try doing your code again as well as clearing the cache and refreshing the page but sadly it didnt work.

    It seems to work first time you view the menu, but then when you go back to the menu all drop downs happen again.

    Maybe there isnt anything I can do with this current build?

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Navigation drop down menu’ is closed to new replies.