How to do this

[dmedianik]

I’ve been trying to get a drop down menu that pushes content down, not sure which menu element to use, but I did try them all.

How to do a pricing menu such as this:

It seems each row is 3 columns and is structured as such;

Text Element Left Aligned
Line Element set to full width
Text Element to display price, with another text element below it for the description?

Would love some insight on how to do this, it is a nice way to display pricing for services or menu at a restaurant.

It also has some interesting behaviour when resizing for smaller size displays.

[ruenel]

Hello SpiceManagement,

Thanks for writing in!

Menu Drop down that pushes down the content is only available in the mobile menu of the default header if you are using Pro theme and the mobile menu of the X theme. Regretfully there isn’t any available menu element that behaves like that at the moment. The menu dropdown element will only give you drop down menu. This do not push down the content downwards. With a custom css, you may be able to do a push downward by using this custom css:

.x-menu.x-menu-dropdown {
    display: none;
    position: relative;
    visibility: visible;
    opacity: 1;
}

.x-menu.x-menu-dropdown.x-active {
    display: block;
}

Please note that issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

With regards to the pricing menu, you do not need to have columns. Simply insert a headline element and use this as a text for example:

Extreme Mega Volume <span class="right">250/125</span>

<span class="right">{price}</span> is needed so that the price will be aligned to the right while the rest of the headline text is on the left side. You may then add a bottom border in the headline element. In my screenshot below, I am using a headline element and the text element. For the text element, I set a maximum width of 350 pixels, aligned the text to the left and set the right margin to 0 while the left margin is in auto to make sure that the text element will be position to the right most of the page.

Hope this helps.

[dmedianik]

Rue, thank you for the help and providing me with a tutorial on how to make the menu. Just wondering is there a way to make the bottom border only start after the service word and end right before the price? Example is like the website I sent in secure note.

Thank you for the info regarding the dropdown menu, do you know if that is a planned feature? It seems to be a really popular menu style that I personally like for mobile.

[ruenel]

Hello SpiceManagement,

Thanks for the updates.

The bottom border is applied to the whole headline element. Adding a line in between the Service word and the price would require additional element. Perhaps the classic line shortcode could help. You may use something like this content in the headline element:

Extreme Mega Volume <span class="right">250/125</span>[line class="right" style="border-color: red;display: inline-block;width: calc(100% - 300px);"] 

This dropdown menu feature is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks!

[dmedianik]

How do I modify a Social Element, I want the Border to go around only the graphic and not the text. How to I push out the margin around the graphic.

[lely]

Hi @dmedianik,

Inspect the Social element, go to GRAPHIC TAB > set it on GRAPHIC ICON BORDER:

If you have any other inquiry that is not related to initial question, please do open a new thread. This will help respond faster and to avoid confusion on longer thread. Thank you.