[Resolved] Need sub menu on click as it looks on hover?

Home Forums Support [Resolved] Need sub menu on click as it looks on hover?

Home Forums Support Need sub menu on click as it looks on hover?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #836102
    Bob

    Hi GP peeps,

    I have been searching the forum but cannot seem to find an answer to my needs.

    I have a pretty standard menu, with sub menus I want to display on click to the right. When in hover mode, it is absolutely perfect, but on-click with the CSS code below causes the sub menu to be shifted right with blank spaces to the left and the background seems to be transparent (the menu items only appearing once I hover over them).

    Is there a way to get the on-click to look exactly like it does on hover please?

    The code I tried is below, but as mentioned above, I don’t appear to be doing something right.

    Appreciate any help you can give me πŸ™‚

    Thanks & kind regards

    Bob

    .dropdown-click .main-navigation ul ul ul,
    .dropdown-click .secondary-navigation ul ul ul {
    left: 100% !important;
    top: 0;
    position: absolute;
    }
    .dropdown-click .main-navigation ul ul .dropdown-menu-toggle:before,
    .dropdown-click .secondary-navigation ul ul .dropdown-menu-toggle:before,
    .dropdown-click .main-navigation ul ul .menu-item-has-children.sfHover>a .dropdown-menu-toggle:before {
    content: “\f105”;
    }

    #836417
    David
    Staff
    Customer Support

    Hi there,

    in Customizer > Layout > Primary Navigation you can select Navigation Drop Down options, which includes two click options… Let em know

    #836444
    Bob

    Hi David,

    Yes I found those thank you, however I may not have explained it properly. When Hover is selected, the sub menu flies out to the right showing the subs with no spaces on the main section of the dropdown.

    But IF I select either of the other options, the main dropdown has gaps where the sub items are meant to be and although it shifts them to the right, the background appears to be transparent (despite being correct in colour settings) and they seem invisible until hovered over?

    I’m puzzled – Have attached link to example of what I get when I use the CSS. Hope this helps explain it.

    Thanks….. Bob

    https://drive.google.com/file/d/1WDcxJh9Eh3o8CuKwPA9X0Bdd2WhVnoTQ/view?usp=sharing

    #836508
    David
    Staff
    Customer Support

    Sorry i am having one of those days lol – i made a screen recording to show you what i am currently seeing…

    https://www.useloom.com/share/40f346799b5b4479b36a4e9bde9863ab

    #836509
    Bob

    Sorry David,

    My fault, published the change now so you can see πŸ™‚

    #836518
    David
    Staff
    Customer Support

    Aah ok – need more coffee. Try this CSS:

    .dropdown-click .main-navigation ul ul ul, .dropdown-click .secondary-navigation ul ul ul {
        left: 100% !important;
        top: 0 !important;
        position: absolute !important;
        background-color: #777; /* change color */
    }
    #836543
    Bob

    You, Sir, are a genius! – no coffee required!

    Thank you so much! Works great!

    #836547
    David
    Staff
    Customer Support

    Glad we got there in the end πŸ™‚

    #867486
    Ben

    I’m using the CSS that David provided above, and it works well on the main menu. However it also appears to break the slideout menu… It stops you from opening a sub-menu within a sub-menu. Is it possible to restrict the above CSS so that it only has any effect on the main menu, and not the slideout menu?

    Thanks!

    #867552
    Tom
    Lead Developer
    Lead Developer

    Can you try replacing .main-navigation in his code with this: .main-navigation:not(.slideout-navigation)?

    #867593
    Ben

    Perfect, thank you Tom!

    #867963
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

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