Inserting Slider Rev burger menu into product pages & forms

[iamwithU]

Thank you @tristup for your prompt response. I’ve gone through the docs, videos and your reply. I don’t fully grasp the part in relation to my menu items (links). I guess what you & @ruenel are saying is ignore the rest of the settings and focus only on the Top Link Primary Size.

If you look at the screenshots (Themeco modal and the Slider Rev modals) attached above, you notice a stark difference. How do I go about making my font of my menu items (links) larger on the bigger screen without bloating up the font on the smaller screens?

Also asked in my last post - how to make the close button (X) un-bold?

[ruenel]

Hello @iamwithU,

I have checked your Slider Revolution menu items and as it turns out the font is Raleway with a font weight of 500 and with the font size of 60 pixels in medium to large screens while having a 31 pixels on smaller screens. Please make sure you have the same font settings so that you can replicate the look and feel of the menu items that you have inserted in the Modal element particularly the Navigation Inline element. You can set the same font size in your Menu Navigation > Top Links with the following settings:

Click the word “Size” to launch the font size setting for different screen sizes. By utilizing the Responsive Styling, you should be able to set the font size in different screen sizes. If you are not yet familiar with the Responsive Element styling, please check this out:

• Responsive Styling | Themeco Docs

And by the way, “X” button in our Modal element is using an SVG while the X button of the Slider Revolution is using just lines. They have different structures which is it would be imposible to have the same X button look.

Best Regards.

[iamwithU]

Thank you, awesome @ruenel. I’m terribly impressed that you went out of the way to check the font sizes of my Slider Rev modal. So kind of you. I finally am able to replicate something similar.

As before, I learnt something precious from you guys through this interaction. Really appreciate your effort and hard work here. So grateful

[tristup]

Hi @iamwithU,

Glad that we are able to guide you on this.

[iamwithU]

Now that I got my modal done, I tried to fix my Header. Alas it was more tricky than I thought.

I managed to increase the size of my logo and name. But when it came to the burger menu (& the Back button), I’m stumped. I got things messed up. You will see that on some screen sizes, the burger menu became even smaller.

And on my devices, such as iPhone, iPad, and Samsung tablet, the modal became wonky:

The X (close button) became blue color when it’s supposed to be grey.

Would appreciate your kind help. What I’m trying to do is to simulate the size of the burger menu of my Slider Rev so as to give a consistent look throughout my webpages.

[ruenel]

Hello @iamwithU,

Thanks for updating in! You are using the em unit for the Hamburger Toggle menu and the Close button. If you want a more consistent font size, you can use a fixed value with px unit instead.

As for the Close button turning into a Blue color, I would highly recommend that you disable your WP Rocket plugin first and clear your browser cache before testing your site again, Be advised that performance plugins such as the WP Rocket are best to turn ON when you are done building the site and ready to go live.

Best Regards.

[iamwithU]

Thank you @ruenel for staying with me on this.
As advised, I’ve deactivated my WP Rocket plugin. I also managed to make my close button (X) uniform.

I’ve tried to increase the size of the burger menu (Hamberger Toggle) and the height, but there seems to be something limiting it. Is it because it is a SVG? This is where I increased the px:

Likewise, I tried to adjust the font of my “Back” button inside the Header (next to my burger menu), I seem to be restricted. Is this the correct place to do it:

I’m hoping to make the 2-lined burger similar in width and height of my existing Hamburger Toggle created in Slider Rev.

[christian]

Hey @iamwithU,

To increase the “burger” size, increase the Graphic Icon Size under the Toggle options. You can replicate the size of the 2 line burger of Pro but It’s impossible to replicate the “thinness” of your slider’s 2 line burger. That would require custom development which we can’t provide.

If you’ve noticed, there is a dedicated Size setting for the Toggle. That is for the space around the Graphic Icon.

As for the “Back” button, yes, adjust the Primary Size.

Hope that helps.

[iamwithU]

Hey @ruenel, wonder if I can have the benefit of your help here.
You’ve successfully helped me to make my modal consistent with my Rev Slider modal.

Now I need help to make my headers consistent too. If you see the screenshots below, you will notice that in my quest to enlarge the burger menu, I’ve over extended the other header elements, such that they are now bigger than that in my Rev Slides:

I think this is due to lack of fully grasping the various sizing at different sections. Would deeply appreciate your diagnosis and advice.

Lastly, what is good way to let the customer know they have clicked the buttons - the “interaction” effect? In Slider Rev, I was able to reverse the font color (ie the background became black and the font became white). Is this available without customizing and using CSS?

[ruenel]

Hello @iamwithU,

I will again reiterate that the icon used in your RevSlider is just lines where as the Toggle icon in the Modal element is using Font Awesome icons.

What we can do is only adjust the font size of the icon. We cannot adjust the space between the lines inside the icon itself or how thin or bold those lines within the icon.

Yes, the interaction effect in your button. You will need to change both the background color and the text color of the Button element. They will have opposite colors like in this example;

Hope this helps.

[iamwithU]

No awesome @ruenel, alas you mis read me. I was not referring to the Toggle icon anymore. I was referring to the other elements in the Header, ie the logo, the name and the buttons.

You recall you taught me to use the same px (for my Slider Rev modal elements) and applied it to the Pro modal. I did the same for my logo, name. But they now appear too big and inconsistent with my Rev Slides. Esp on the smaller screens. (Please see my previous 2 screenshots). Just wonder if you can help me to make the headers on both Pro and my Slider Rev look a little similar (other than the burger menu). Appreciate your patience.

As for the button on clicking, thank you @ruenel for the great tip on achieving the desired interaction effect. That did it and made the user experience intuitive. Appreciate that!

[ruenel]

Hello @iamwithU,

With your button elements, you can change the size on a specific screen size by utilizing the Responsive Styling as well. Just click on the Back button and go to the Button > Primary > Size option. You need to click the word size to launch the responsive settings.

As for the logo images, you can set a smaller maximum width in a specific screens size:

By doing this, your logo image will become smaller on smaller screens.

Hope this helps.

[iamwithU]

Wonderful, @ruenel. Thank you for your great help. Happy weekend!

[ruenel]

You are most welcome, @iamwithU.