Fullscreen Menu

You are here:
Estimated reading time: 1 min

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.

Installing

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

Dependencies:

  • Elementor plugin
  • Rey Core plugin
  • Rey Theme

Options

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

Content type – Menu

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

Content 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.

Adding 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: 738

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!

Join the conversation