Home Forums Weaver Xtreme Theme Sub Menu displayed as a Horizontal block instead of vertical drop down at hover

This topic contains 5 replies, has 2 voices, and was last updated by  scrambler 3 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #59736

    ROBIN
    Participant

    Is there a way to create a drop down menu similar to the Our Products tab on this website?

    https://www.phoenix-tape.com/

    I saw this option in the Guide 4) Two columns Sub Menus but I am looking to do something more like the 3 x 3 picture links and wider across the page.

    I have looked through the forum, but I may just not know what exactly to search for.

    Any suggestions would be greatly appreciated.

    Thanks!

    #59737

    scrambler
    Moderator

    The revised CSS below should allow to do 3 columns.

    If you only need that on one specific menu item, we can customize, we can alsi adjust the horizontal position if needed.

    To do any customization, we need the menus in place with the CSS

    @media screen and (min-width:768px) {
    /* Set overall width */
    ul.sm.wvrx-menu ul, ul.wvrx-menu ul {width:500px !important;}
    /* Spread over two columns & top border */
    ul.sm.wvrx-menu ul > li, ul.wvrx-menu ul > li {
    float:left !important;width:33.3%;border-top:1px solid black;
    }
    /* First columns clear and right border */
    ul.sm.wvrx-menu ul > li:nth-of-type(3n+1),
    ul.wvrx-menu ul > li:nth-of-type(3n+1) {
    clear:both;border-right:1px solid black;
    }
    ul.sm.wvrx-menu ul > li:nth-of-type(3n+2),
    ul.wvrx-menu ul > li:nth-of-type(3n+2) {
    border-right:1px solid black;
    }
    }

    #59775

    ROBIN
    Participant

    Hi Scrambler

    I copied your code, but it didn’t seem to work. I think the reason is I am using a menu from the Appearance menu option, because I couldn’t figure out how to make the products be a sub page, instead of the default menu.

    The Website is started enough that I can post it here now.

    https://specializedtape.com/sample-page/

    Can you see if something isn’t right? When I had the Two column sub menu option it worked to make 2 columns, but this one didn’t do anything.

    Thanks for your help!

    #59777

    scrambler
    Moderator

    I don’t know how you pasted the CSS, but it is messed up with some weired character in it (in yellow below)

    /* CSS+ Rules */
    .menu-primary .wvrx-menu li:hover > a {text-decoration:underline;}
    .menu-secondary .wvrx-menu li:hover > a {text-decoration:underline;}
    .menu-secondary .wvrx-menu ul li a:hover {text-decoration:underline;}
    /* Global Custom CSS Rules */
    @media screen and (min-width:768px) {
    /* Set overall width */
    ul.sm.wvrx-menu ul, ul.wvrx-menu ul {width:500px !important;}
    /* Spread over two columns & top border */
    ul.sm.wvrx-menu ul > li, ul.wvrx-menu ul > li {
    float:left !important;width:33.3%;border-top:1px solid black;
    }
    /* First columns clear and right border */
    ul.sm.wvrx-menu ul > li:nth-of-type(3n+1),
    ul.wvrx-menu ul > li:nth-of-type(3n+1) {
    clear:both;border-right:1px solid black;
    }
    ul.sm.wvrx-menu ul > li:nth-of-type(3n+2),
    ul.wvrx-menu ul > li:nth-of-type(3n+2) {
    border-right:1px solid black;
    }
    }
    /* End Weaver Xtreme CSS */

    #59779

    ROBIN
    Participant

    I have no idea, where that came from.  I re-applied the code and it worked.

    2 questions:

    How do I put pictures in the Menu blocks and how do I make the blocks bigger or responsive to the text?

    Thank you very much!

    #59781

    scrambler
    Moderator

    Depends what you mean by pictures, background behind the text or image to replace the text…

    In all cases, you can use HTML placed in the label box of the menu Item in Appearance > menus

    If background image, you can just inspect the menu Items to get the Selector and use CSS like

    #menu-item-227 {background-image:(URL) no-repeat;background-size:contain;}

    For the text to wrap in their boxes, use the rules below.

    ul.sm ul.sm-nowrap > li > a {white-space:normal;height:30px;}

     

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

You must be logged in to reply to this topic.