[Resolved] Sub-Menu Canvas Panel Desktop

[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 🙂

[Tom]

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.

[David]

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

[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!

[Tom]

No problem! 🙂

[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

[Tom]

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.

[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!

[Tom]

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

[Nacho]

Sure!

So you can see what I have done with generatepress 😀

How can I send you the URL privately?

[Tom]

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

Just be sure to mention this topic 🙂

Thanks!

[Nacho]

Message sent! 😀

[Tom]

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 🙂

[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 😀

[David]

Hi there,

Ill pass this onto Tom…

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

[Author]

Posts