Inserting Slider Rev burger menu into product pages & forms

[iamwithU]

Hello awesome support team,
Every page in my website is a Slider Rev module with a burger menu. But when a customer clicks a form or product, the navbar is the default Theme header with a different navbar, different burger menu and different animation. There is thus a disconnection in the appearance and feel when a visitor moves from a webpage to the forms and product pages.

a. Does the Header Builder in my Theme allow me to have a 2-bar burger menu, instead of the usual 3-bar? (I think it’s called the “mobile button”)
b. If I want this mobile button to be also seen on the bigger screens, how do I effect this? ie I want the menu items (links) to slide out when the mobile button is clicked - even on the bigger screen.
c. How do I incorporate Slider Rev header (burger menu, logo) on my product pages and forms?

Any suggestion to create a seamless or consistent look will be welcome!

[christian]

Hey @iamwithU,

a. Does the Header Builder in my Theme allow me to have a 2-bar burger menu, instead of the usual 3-bar? (I think it’s called the “mobile button”)

Yes. It’s not the Header Builder actually. You will use the Mega Menu Modal in the Header Builder. You can choose a Font Awesome Icon or an Image as the Mega Menu Modal Toggle. Font Awesome has a 2 bar / line menu burger icon.

b. If I want this mobile button to be also seen on the bigger screens, how do I effect this? ie I want the menu items (links) to slide out when the mobile button is clicked - even on the bigger screen.

By default, all elements will display in all screen sizes so the Mega Menu will be seen from desktop to mobile screen sizes. To learn more, please watch the video tutorial of the Mega Menu here https://youtu.be/zgAMBLRxG_w

c. How do I incorporate Slider Rev header (burger menu, logo) on my product pages and forms?

That is not possible. I’d recommend you use the Header Builder with the Mega Menu element within it.

Thanks.

[iamwithU]

Thanks @christian for letting me know about Mega Menu Modal.
I watched the video. But I couldn’t find the place for selecting Font Awesome Icon and so couldn’t progress further. Can point me in the right direction?
Good weekend.

[ruenel]

Hello @iamwithU,

You need to click the Modal element, and find the Toggle > Graphic Icon option.

Cheers.

[iamwithU]

I see. So it’s not “Mega Menu Modal” nor “Font Awesome”. Tks @ruenel, for that photo - that was very helpful.

Ok, I found the Graphic Icon. So what do I do next to set the menu items, or links? I have 5 menu items, so I created 5 texts within the “children” of this Modal. Is that correct & how do I turn these texts into navigation links, that when clicked will bring the customer to the respective webpage? I’ll like this Modal to apply to both mobile and desktop screens.
Appreciate the detailed steps, diagrams or pointing me to a manual on this.

[christian]

Hey @iamwithU,

@iamwithU

So it’s not “Mega Menu Modal” nor “Font Awesome”

Just to let you know, the Graphic Icon you’ve selected is a Font Awesome icon. I realized I should have instead referred to it simply as “Graphic Icon.” Also, to replicate the menu of your slider, you need the Mega Menu Modal. I hope that is clear now.

@iamwithU

So what do I do next to set the menu items, or links?

You need to add a Navigation Inline element inside the Mega Menu Modal. I’d recommend you rewatch the video tutorial about the Mega Menu element here: https://www.youtube.com/watch?v=zgAMBLRxG_w. It might not show you the exact setup you’re looking for but it will teach you to use the Mega Menu element. Also check our doc about the Mega Menu element here: https://theme.co/docs/mega-menu

Thanks.

[iamwithU]

Thanks @christian for the prompt response. Thanks for telling me that I now need a Navigation Inline.

@christian

to replicate the menu of your slider, you need the Mega Menu Modal

I know I need the Mega Menu Modal, but just don’t know what to do next after selecting the Graphic Icon. If you see the video, it starts right away without telling us how to land on that page or that section:

If you see from my end, I have selected the Graphic Icon on the left. But I don’t have a editing canvas on the right (unlike your video) where I can see the Graphic Icon:

I know I have to choose the Mega Menu Modal and Inline Navigation Inline somewhere somehow…I’m just totally lost after selecting the Graphic Icon. What is that step that I need to cross at this moment? Care to share the baby steps and diagrams - so I can link the Graphic Icon to the Mega Menu Modal?

[christian]

Hey @iamwithU,

Your screenshots shows the Toggle options. From your screenshot, click the Modal options.

From there, you can add, delete or edit elements.

Or, you can open the modal and drag elements there.

I’d recommend you become familiar or explore an element’s navigation.

Hope that helps.

[iamwithU]

Hmm, I’m in Toggle because that’s where @ruenel asked me to go and look for the Graphic Icon, which I did.
Are you saying, after that I should just get back up one step and then in Modal, choose… Mega Menu Modal, and then choose Inline Navigation?

If so, I managed to get the burger menu onto the Header, and I have chosen my default menu to be the ‘menu’.

But when the burger menu is clicked, a modal appears with another icon appears - please see screenshot.

And when that icon is clicked, a default modal is partially shown - please see screenshot:

I think I’m getting there. Just some more baby steps. Appreciate your patience!

[christian]

Hey @iamwithU

@iamwithU

I’m in Toggle because that’s where @ruenel asked me to go and look for the Graphic Icon, which I did

That’s right. There’s no problem with that. The icon should be set under the Toggle options of the Mega Menu Modal element. Toggle and Modal options are separate, but both are part of the Mega Menu Modal element.

@iamwithU

Are you saying, after that I should just get back up one step and then in Modal

It’s not actually a step as you can go back at any option any time. Just open up the Modal options of the Mega Menu Modal element to work with the modal including the modal content.

@iamwithU

choose… Mega Menu Modal, and then choose Inline Navigation?

Looks like you placed the Mega Menu Modal element inside a Modal element. The Mega Menu Modal element is already a modal. To save you time, move the Navigation Inlne directly under the Modal element.

After that, set the Navigation Inline’s Flexbox Direction to Column.

You can then set edit the rest of the settings like the modal transparency and menu color of the Navigation Inline.

Thanks.

[iamwithU]

Hey @christian, thanks v much for the patient guide. Phew, I finally got the modal to show up!
So no need to choose the Mega Menu Modal, right?

Just some loose ends:

1. Must the Graphic Icons come with a circle border encapsulating the icon? Is there a way to remove the circle, so the icon is just purely a 2-bar thing, with no border around it?

2. Is it possible to change the font color of the menu items to white? The font of the text, “About”, “Products” etc is currently black. I’m hoping to make the modal as similar as possible to other webpages using Slider Rev - white text on a gray background. (I like the font size to match my Slider Rev modal too, but it appears Pro options are fixed?)

3. How do I ‘add a new condition group’ to have this header apply to the Forms in my website? When I went to the ‘Post Type’, I don’t see forms as one of the options. I use Form 7 to set up the forms. Is there a way to set the page ID into the conditions?

4. Now that I got this header in Header Builder, how do I delete the header in Theme Options? The reason I’m asking is so that I can reduce unnecessary rendering resources - and hopefully speed up the loading of the website… (hope this is not wishful thinking)

An example of this spanking new modal is in my individual product pages

[christian]

Hey @iamwithU,

@iamwithU

Must the Graphic Icons come with a circle border encapsulating the icon? Is there a way to remove the circle, so the icon is just purely a 2-bar thing, with no border around it?

Yes, open the Toggle options again and set the Background to Transparent. Then, disable the Box Shadow as well as the Border Radius under the Toggle > Design options.

@iamwithU

Is it possible to change the font color of the menu items to white? The font of the text, “About”, “Products” etc is currently black. I’m hoping to make the modal as similar as possible to other webpages using Slider Rev - white text on a gray background. (I like the font size to match my Slider Rev modal too, but it appears Pro options are fixed?)

Open the Navigation Inline > Top Links > Primary options and set your desired font settings.

@iamwithU

How do I ‘add a new condition group’ to have this header apply to the Forms in my website? When I went to the ‘Post Type’, I don’t see forms as one of the options. I use Form 7 to set up the forms. Is there a way to set the page ID into the conditions?

Please list down the URL of the pages you wish your header to display and we’ll point you if there’s a condition for it.

@iamwithU

Now that I got this header in Header Builder, how do I delete the header in Theme Options? The reason I’m asking is so that I can reduce unnecessary rendering resources - and hopefully speed up the loading of the website… (hope this is not wishful thinking)

The Original Header can only be overridden. It is not something that can be deleted. If you assign the your header to specific pages only, your other pages will use the Original Header. If you don’t like that, you must create a header for your entire site. That is using the Entire Site condition. To learn more about Conditions and Assignments, please check our doc about it here https://theme.co/docs/conditions-and-assignments

Thanks.

[iamwithU]

Thank you wonderful @christian. That was fabulous!

May I trouble you to take a look at my modal:

Strangely there is a white empty space below the modal. Do you know why the modal doesn’t fill up the whole page even though I set it to 100% for width and height?

I hope this is not too much to ask: can the 2-bar burger menu animate and form the X (the close button)? I notice in the Toggle section, there is a ‘specialty’ option - what is that for?

What I hope to achieve is for a look and feel to be close to that of the Slider Rev modal - if possible. If not, I will understand.

As for the assignment of the condition, I like this header to apply also to the urls in the secure note.
So grateful for your help. You are God-sent.

[christian]

Hey @iamwithU,

The white background that you see is the modal background. Set the modal background to transparent by sliding the Background option all the way to the left.

Next, regarding your modal size. Set the options to the following. You want the modal to be horizontally and vertically centered automatically with no min and max height and width.

What would be left after that is you edit the colors of your Navigation Inline.

Hope that helps.

[iamwithU]

Hmm… after following your steps, the result is different. Please see screenshot:

I couldn’t achieve what you did, ie having the whole modal spread across the webpage. Do I have to adjust something else, such as the “backdrop”? Also notice that the X (close button) is outside the darker box.

Also, you asked for the url of the other webpages so that I can assign the header to those pages…
Lastly, what is the “specialty”, under the Effects section? I attach here a screenshot showing the modal done by Slider Rev, which I hope to replicate here, so as to give the customer a consistent & seamless experience.

Look forward to hear from you soon.

[christian]

Hey @iamwithU,

Sorry, forgot that your Navigation Inline > Top Links has a background too. Set the background to transparent as well.

@iamwithU

Also, you asked for the url of the other webpages so that I can assign the header to those pages…

You currently assigned the header to your products and other WooCommerce pages.

If you want to apply the header to specific pages as well, click the Add Condition Group button and choose Page Specific is [select your page in the dropdown]

@iamwithU

Lastly, what is the “specialty”, under the Effects section?

It’s for the Modal to blend in with the content or anything behind the modal. If you’re looking to blur the content when the modal is active though, that is not possible. Slider Revolution uses a special technique to achieve that and can only be added in Pro by custom development which can only be done by our Elite team.

Thank you for understanding.

[iamwithU]

No worries. I understand. Things are getting better

In order that I learn from this, may I know what exactly is the “Backdrop” under “Modal”? There is also a color option for this Backdrop, as opposed to the modal “Background” color. I don’t fully grasp what is mentioned in the documentation about the close button: If I want to reduce my X (close button), do I reduce the “base size” or the “dimension”, or both?

Also, as I try to simulate the size of my font in my Slider Rev modal, I tried adjusting the font of the menu items, such as “About”, “Products” etc. But there seems to be 3 separate places for font sizes to contend with. There are:

• Modal > Set up > Font size
• Navigation inline > Menu > Set up > Font size
• Top links > Font size.

May I know what is the difference of the above? I am also trying hard to match the font size with the X (close button), which is currently oversized, relative to the font sizes of the menu items.

Thank you for your patience.

[ruenel]

Hello @iamwithU,

In your custom header, you have this element structure:

The Backdrop is actually a layer of a background color in the MODAL element that is behind modal popup content and also on top of the page content which separates them.

If you want to change the font size of the menu items, you can change it in the Navigation Inline, Menu > Top Links > Primary > Size. Any other places should have 1 em.

The Close Size relates to the size of the “X” button while the Dimension relates to the distance of the X button to the edge of the screen position.

Best Regards.

[iamwithU]

Thank you @ruenel. Your pictures were very helpful indeed.

I changed all the rest of the places to em1 and just focused on the setting you mentioned and set it to 2em at:
Menu>Top Links> Primary Size. The result is this:

I’m trying to approximate the Themeco modal closer to the look of my Rev Slider, which is:

If I increased the setting higher, the font will be bloated in the smaller screens. I guess then 2em is the maximum we can go then - no way of increasing the font on the bigger screen only?

As for the close button (X), is there a way to make it non-bold? (to make it look the same as the Rev Slider close button).

Lastly, for my education and for those following this thread, why is there a separate font setting in:

• Modal > Set up > Font size
• Navigation inline > Menu > Set up > Font size
• Top links > Font size.

[tristup]

Hi @iamwithU,

The Modal has the font option as it can contain other text or content. The Navigation INline has different font settings one for all the items and separately for the Top Menu items. I would suggest you go through the following documentation which will help you.

Modal | Themeco Docs

Navigation Inline | Themeco Docs

Hope it helps.
Thanks