Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #4859


    Is it possible to apply Velvet’s sub-submenu effect — the drop-down/hidden div effect — to the top level menus?

    Also, is it possible to have the top level menus be labels not pages/links?

    My menu:

    About (a label)

    –> Press (Custom Template Page)

    –> Bio (Custom Template Page)

    Projects (a label)

    –> Project #1 (Custom Template Page)

    –> Project #2 (etc..)

    I bought two themes: Velvet (for the template builder!) and Avisio (for the drop-down menus), but I really need both features. Or… perhaps there’s another Kriesi theme that has both?




    Hi Lori,

    As for your first question, this is how i made first level hidden drop down div.

    Go to css/custom.css

    and add this:


    .main_menu .menu li ul.showblock{



    .main_menu .menu li:hover > ul{


    /*end menu*/

    Should work. As for your other question, I can’t help you since I don’t know what you mean by label, sorry.

    Don’t know if I was supposed to help you or if only admins should answer here, if I was out of line, let me know.


    Thank you, sooo much GriffinGraffix–I appreciate you taking the time to answer!

    Your fix needed one more tweak, but it pointed me to correct code in the styles.css and gave me the courage to experiment… here’s what worked:


    .main_menu .menu li ul{


    overflow: hidden;


    .main_menu .menu li ul.showblock{



    .main_menu .menu li:hover > ul{



    /*end menu*/

    Thanks again,



    Thanks GriffinGraffix for helping us out. Your help is welcome :)



    Can we have this as a feature request in the Theme Options panel? I’m not a coder. Thanks.




    Hello again. I thought I’d share what I discovered about the menus. Dude–please delete this post and/or correct it if these solutions are too kludgy or if they could cause other problems!

    1) I figured out how to create a “label” for my top-level menu options. Go to Appearance=>Menus. Build your custom menu. Where you need a label, don’t add a page. Instead, add a “Custom Link” using a hash symbol (#) for the URL. It may rewrite the hash in the process of adding it to the menu, but you can re-enter/save the url again once it’s included. Make sure there’s no http… just the hash. Then, remove the css hover styles for that menu level. Now they look like labels and if clicked, nothing happens.

    2)The solution for hiding/revealing the first-level submenus worked well, but I needed my sub menus to expand/drop down *over* the content rather than bumping down the content (I LOVE Kriesi’s bump-down effect, but the client will undoubtedly add waaay too many pages for that to work). So I added the earlier code plus the following snippet to my custom.css and I now have more traditional drop downs:

    .main_menu .menu {

    position: absolute;

    top: 58px;

    left: 595px;

    z-index: 1000;



    .container {





    the css code shouldn’t affect the theme functionality :) – thanks for posting your code!


    Hi Lori,

    Can u post the url showing your changes? Your site? I’d like to see the result of your css with label.

    What I am trying to achieve is exactly like this

    only instead of + sign I will have a tab that says Menu. But I want it exactly like that (ie tab on right side and full width slide down) and I haven’t been able to create a full width div that will make page slide down on hover or make the tab show on right side.



    Hi–unfortunately, I can’t share the site until the client takes it live… I’ll do so then… but my menu is not as complex as the one you posted. I simply reworked my Velvet menu so it functions like the Avisio menus (sadly, without the cool fade effect!)


    Hi Lori,

    ok thanks, I understand, I do sites for clients too…I know how it is. I’ll look at avisio template and see what it looks like..good luck!

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘modifying the Velvet menus’ is closed to new replies.