GET REY

Fullscreen Menu

You are here:
Estimated reading time: 1 min
In this article

This feature is deprecated. Please use the Trigger widget and Off-canvas global section. Here’s a quick example video https://d.pr/v/Lx2d4W .

Fullscreen Menu Rey Module is an alternative to conventional site navigations. It’s represented by a generic “hamburger icon” that is shown in the header. Upon clicking, it triggers a sliding animated panel with a navigation (by default), or a Global Section.

LinkInstalling

Please access Rey theme > Plugins Manager, where you will find Rey Module – Fullscreen Menu plugin listed eg: https://d.pr/i/SHAtsR . Simply install & activate.

LinkDependencies:

  • Elementor plugin
  • Rey Core plugin
  • Rey Theme

LinkOptions

To enable, you’ll first need to access Customizer > Header > Fullscreen Navigation.

Fullscreen navigation options.

You can select the 2 types of content:

  • Menu navigation
  • Global section

LinkContent type – Menu

This will simply display a navigation that you choose, and will allow adding an image (logo) above it.

LinkContent type – Global Section

This is where it gets interesting. This enables you to create a Generic Global Section, which can contain pretty much any type of Elementor element. Sky’s the limit!

So, first head up to Rey Theme > Global Sections, create a new Generic Global section . After you’re done editing, go back to Customizer and select the section you just created. Read more on how to create Generic global sections.

The menu navigation recommended to be used is called Fancy Menu. Make sure you’re using this one when adding the navigation in the Global section.

LinkAdding the icon in custom Elementor Headers

Look for the element called Fullscreen Nav. Icon . It’s a basic element with no options except the icon’ color.

Was this article helpful?
Dislike 0
Views: 2955

4 Replies to “Fullscreen Menu”

  1. Ben

    Hi,

    Is there anyway of changing the sliding animated panel trigger design so its one colours rather than the three colours sliding?

    Many thanks,

    Ben

    1. mariushoria[ Post Author ]

      Hey Ben,

      At the moment this is doable only with some CSS. Please access this link https://d.pr/n/rb3a6p and copy / paste it into Customizer > Additional CSS and replace the hex color codes as you want.

      Hope it helps!
      Marius

      1. Ben

        Hi Marius,

        This did not work when saving into customizer > additional css

        1. mariushoria[ Post Author ]

          Hi Ben! Can you create a new ticket here https://support.reytheme.com/new/ and send me the URL of the site so i can inspect with Chrome dev tools and see what’s going on? Thanks!

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!