[Resolved] Sub-Menu Canvas Panel Desktop

Home Forums Support [Resolved] Sub-Menu Canvas Panel Desktop

Home Forums Support Sub-Menu Canvas Panel Desktop

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1158058
    Nacho

    Hi,

    I have 3 questions related to the canvas menu on desktop:

    1. Is there any way that the desktop sub-menu opens to the right?

    2. Can the sub-menu be displayed with the mouse hover event?

    3. Finally, I would like the desktop opening menu animation on the desktop to push the content to the right instead of overlapping the layout.

    Thank you for the support!

    I am very happy with this theme 🙂

    #1158429
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    For 1 and 2, try this:

    #generate-slideout-menu .slideout-menu li:hover > ul, #generate-slideout-menu .slideout-menu li.sfHover > ul {
        display: block;
    }
    
    #generate-slideout-menu.main-navigation .main-nav ul ul {
        left: 100%;
        position: absolute;
    }
    
    nav#generate-slideout-menu {
        overflow: visible;
    }
    
    .slideout-navigation .menu-item-has-children .dropdown-menu-toggle svg,
    .slideout-navigation .sub-menu .dropdown-menu-toggle .gp-icon svg {
        transform: rotate(-90deg);
        transform-origin: center;
    }

    As for #3, I’m not sure if it’s possible with the current setup, but I’ll ping David to see if he has any ideas.

    #1158632
    David
    Staff
    Customer Support

    Hi there,

    3. Try this CSS:

    body>*:not(.slideout-navigation) {
        transform: translate3d(0, 0, 0);
        transition: transform .2s cubic-bezier(.16, .68, .43, .99);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
    body.slide-opened>*:not(.slideout-navigation) {
        transform: translate3d(-265px, 0, 0);
    }

    This is for a right side off canvas panel. If you want it from the left then change -265px to 265px

    #1158707
    Nacho

    Dear developers,

    I have been testing the tips you have given me and adjusting them a bit have come to work.

    The thing is that my intention is that the menu fionation like this: https://www.pccomponentes.com/ but I have realized that for this, I have to change internal things at the core level, so for the moment I am going to postpone this task.

    Thank you very much for having responded so soon!

    #1159009
    Tom
    Lead Developer
    Lead Developer
    #1161533
    Nacho

    Hi Tom,

    Finally I decided to use tips 1 and 2 that you proposed.

    The thing is that when I tested them, I did it adding the code in the page content using a <style> tag, so these orders were the last ones to load and it worked.

    But when it loads the code through the child theme style.css, this code can’t overwrite the original of the theme, because it is loaded in the main page (not external css) and it is set as important!

    Any ideas to fix it?

    I hope I explained myself well.

    Greetings and thanks for the support

    #1162119
    Tom
    Lead Developer
    Lead Developer

    If it’s set as !important and not working, it means something else is wrong. Can you validate all of the CSS in your stylesheet? There’s likely an error in there somewhere causing the rest of the CSS to fail.

    #1162559
    Nacho

    Hello Tom,

    I have already solved the problem.

    The thing is that Generatepress marked the styles of these elements as important!, and sequentially they were the last to load, so it was impossible to rewrite them.

    This is what I have done: in the Elements module, I have loaded the css through the wp_head hook to be the last instruction to process.

    Thank you for the support!

    #1163137
    Tom
    Lead Developer
    Lead Developer

    GeneratePress itself rarely ever uses !important. Feel free to link me to the page if you want me to take a look.

    #1163276
    Nacho

    Sure!

    So you can see what I have done with generatepress 😀

    How can I send you the URL privately?

    #1163590
    Tom
    Lead Developer
    Lead Developer

    You can use our contact form here: https://generatepress.com/contact

    Just be sure to mention this topic 🙂

    Thanks!

    #1163723
    Nacho

    Message sent! 😀

    #1164304
    Tom
    Lead Developer
    Lead Developer

    Your site looks great! I’m not seeing !important added to any of the CSS we provided above – it all seems to be working without 🙂

    #1164862
    Nacho

    Hello Tom,

    I hope this is not wasting your time because the problem is already solved.

    But if you want to know more about the important! tag, I tell you:

    In the first line of the source code of any page, the wp-rocket critical css is loaded through <style id=”rocket-critical-css”> (I tried to deactivate it and towards the same tag but with a native generatepress id), and within that label you can find style orders like this:

    .slideout-navigation .dropdown-menu-toggle: before {
        content: “\ f107”! important;
    }

    These specific attributes come by default in the Generatepress theme, and I had to overwrite them with a hook to be the last one to be processed:

    My code:

    @media
    only screen and (min-width: 769px)
    .slideout-navigation .dropdown-menu-toggle: before {
        content: “\ f105”! important;
    }

    P.D.: I am thinking in migrate another WordPress to Generatepress, is it necessary to extend my license?

    Thank you for the support Tom 😀

    #1165041
    David
    Staff
    Customer Support

    Hi there,

    Ill pass this onto Tom…

    The GP Premium license is for Unlimited Sites so no need to extend

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