Navigation Menu Full Screen

[rmcgroup]

Does anyone know how to create this menu effect, that takes up the whole screen on desktop when you click the 3 line/hamburger menu icon such as this page does? https://www.swyfft.com/

The URL of our website is www.naplesinsurancegroup.com

Thank you!

[Prasant]

Hello @rmcgroup,

Thanks for asking.

Please use header builder navigation model element to mimic the navigation style of the shared demo URL.

Thanks.

[Prasant]

Hello @rmcgroup,

If you have further question, kindly let us know.

Thanks.

[rmcgroup]

Is there a way to keep the website logo and navigation header visible while the menu is in full screen similar to when you view the menu navigation on this page: www.movement.com …?

My site - www.naplesinsurancegroup.com

Thank you!

[paul.r]

Hi,

To achieve that, you can add this in Header > CSS

.hm4.x-bar {
    z-index: 999999999;
}

Hope this helps

[rmcgroup]

@paul.r

.hm4.x-bar {
z-index: 999999999;
}

Thank you. Is there any way to make the header the same color as the menu overlay, only when you’re viewing the menu, then go back to white? Similar to how the menu looks at www.movement.com?

Thank you.

[paul.r]

Hi,

Please remove code I provided above.

Then do the following

1. Add this in Header > JS

jQuery(function($) {
    $( ".x-anchor-toggle" ).on( "click", function() {
        $(".hm4.x-bar").toggleClass("c-back");
    });
});

2. Add this in Header > CSS

.hm4.x-bar.c-back {
    background:red;
    z-index: 999999999;
}

Hope that helps

[rmcgroup]

Ok we are getting closer! Thank you!

Now, is it possible to go one step farther and…

1. …have a different color logo when you click to view the navigation, where we can show an all WHITE logo instead of color, that matches the color of the navigation text?

2. …change the color of the “Menu” and “Get a Quote” navigation texts?

Thank you!

[rad]

Hi there,

1. You mean a dynamic color for the logo? It’s not currently possible, but it’s doable with custom development which a bit complex. I suggest contacting a developer.

2. You can always change the color of your menu once you inspect your menu element. Or, with standard header, you can always change it through theme option’s header section. Or is it related to #1 question where you wish to apply dynamic colors?

Thanks!

[rmcgroup]

1. Ok, thank you.
2. I’d like to display dynamic colors that change once you open the actual menu. So instead of the main Nav text on the homepage staying BLUE when entering the actual manu, it changes to WHITE… make sense?

Thank you.

[rad]

Hi there,

I see, that’s not currently possible either, the only feature that will allow you to change is the active colors. You can inspect your menu and head on top links section, and change the interaction background color. The same goes with text color and box shadows, all you have to do is change the interaction color. Then you can do the same on sub links on same on menu.

Thanks!