Home Forums Weaver Xtreme Theme Vertical menu with a flyout to a mega menu or submenu on hover in Xtreme

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #69123
    dnadesign
    Participant

    Morning Scrambler / Weaver

    I am trying to create a flyout menu to the left of the widget area (and to cover the page content)

    Here is the link -(I have only done the mega menu for the 1st menu item (Art))  https://silkandcottonco.co.za/shop-the-studio/.

    I am using Xtreme Plus – This is the custom CSS I have added so far:

    /* MEGA MENU Default Styling */
    .wvrx-menu ul.mega-menu li {
    white-space:normal;
    width:auto;
    }

    .mega-normal ul.mega-menu li {
    width: 95em !important;
    padding: 1em;
    font-weight: normal;
    font-style: normal;
    font-size: medium;
    }

    li.mega-normal ul.mega-menu li a {
    white-space: nowrap;
    display: inline;
    margin-left: 75%;
    padding: 0;
    text-decoration: none;
    }

    li.mega-normal ul.mega-menu li a:hover {
    background-color: transparent !important;
    }

    .menu-type-accordion .wvrx-menu li:hover > ul.sub-menu {display:block;}
    .menu-type-accordion ul.sub-menu {position:absolute;left:100%;top:0px;width:400px;}
    .menu-type-accordion .wvrx-menu ul.sub-menu > li {float:left;width:50%;}
    .menu-type-accordion .wvrx-menu ul.sub-menu > li:nth-of-type(2n+1) {clear:both;}

    /*

    I used the margin-left:75%; in order for is to flyout beyond the widget area which is clearly not ideal as it moves both menu items by this amount.

    Is there anyway you could help me cover the whole content area with the flyout menu

    Looking forward to your response

    #69124
    scrambler
    Moderator

    I am not sure of you are trying to achieve.

    Are you saying that when clicking on the down arrow of a menu item that has a sub menu and the sub menus become visible, you want the block of sub menu to be shifted to the tight, and over the content area?

    You need to elaborate and eventually show us an example of image

    #69125
    dnadesign
    Participant

    Hi Scrambler,

    Yes The sub menu needs to fly out over the content area (not in the widget area) – where I will probably use a mega menu to divide the items into categories. I attach a picture of what I am trying to achieve

    Let me know if this helps 🙂

    #69126
    scrambler
    Moderator

    Given you only have a few sub menus, it will never look like that.

    Shifting the sub menu block with a white background should be possible with the rules below, and you can adjust the width.

    But I am not sure how responsive it will be.

    I limited the rule to desktop, give it a try and we can try tweaking

    .is-desktop .menu-type-accordion ul.wvrx-menu.sm-vertical ul {
    position:absolute !important;
    left:100% !important;
    width:300px !important;
    background-color:white;}

    .is-desktop .menu-type-accordion ul.wvrx-menu.sm-vertical .menu-item-929 ul {top:-0px !important;}
    .is-desktop .menu-type-accordion ul.wvrx-menu.sm-vertical .menu-item-930 ul {top:-30px !important;}
    .is-desktop .menu-type-accordion ul.wvrx-menu.sm-vertical .menu-item-935 ul {top:-60px !important;}
    .is-desktop .menu-type-accordion ul.wvrx-menu.sm-vertical .menu-item-949 ul {top:-90px !important;}

    It is very hard for me to text the CSS on your side as as soon as I try to expand a sub menu it reloads the page….

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.