Step-by-Step Guide: Customizing Tab Styles and Functionalities for Improved UX | Oxygen Builder Tutorial

Video tutorial is coming soon.
{"component":{"id":2,"name":"ct_modal","options":{"ct_id":2,"ct_parent":0,"selector":"modal-2-1037","original":{"width":"70","backdrop-color":"rgba(0,0,0,0.02)","background-color":"#1a1c1e","display":"flex","position":"relative","border-radius":"16","aos-enable":"true","aos-type":"slide-up","aos-duration":"300","aos-easing":"ease-in-out"},"nicename":"Modal (#2)","media":{"phone-landscape":{"original":{"width":"100","min-height":"50","min-height-unit":"vh","max-height":"85","max-height-unit":"vh","position":"absolute","bottom":"0","border-bottom-left-radius":"0","border-bottom-right-radius":"0","height-unit":"%","height":"100"}}},"activeselector":false},"depth":1,"children":[{"id":51,"name":"ct_code_block","options":{"ct_id":51,"ct_parent":2,"selector":"code_block-51-1037","original":{"unwrap":"true","code-js":"jQuery(document).ready(function($) {\n    $('.modal-back').click(function() {\n        $('#_tabs_contents-10-1037').children().each(function() {\n            if(!$(this).hasClass('oxy-tabs-contents-content-hidden')) {\n                $(this).addClass('oxy-tabs-contents-content-hidden'); // replace 'yourNewClass' with the actual class you want to add\n            }\n        });\n\n        $('#_tabs-3-1037').children().each(function() {\n            if($(this).hasClass('tabs-1213-tab-active')) {\n                $(this).removeClass('tabs-1213-tab-active');\n            }\n        });\n    });\n});\n\njQuery(document).ready(function($) {\n    var start_y;\n    $('#modal-2-1037').on('touchstart', function(e) {\n        start_y = e.originalEvent.touches[0].pageY;\n    }).on('touchend', function(e) {\n        var end_y = e.originalEvent.changedTouches[0].pageY;\n        if(end_y - start_y > 85) { // arbitrary threshold, increase or decrease as necessary\n            $('.oxy-close-modal').click();\n        }\n    });\n});","code-css":" .sm-medium {\n     font-size: 0.875rem;\n     font-weight: 500;\n     font-style: normal;\n     line-height: 20px;\n     text-decoration: none;\n     text-transform: none;\n}\n\n .xl-medium {\n     font-size: 1.25rem;\n     font-weight: 500;\n     font-style: normal;\n     line-height: 28px;\n     text-decoration: none;\n     text-transform: none;\n}","code-php":""},"nicename":"Code Block (#51)","activeselector":false},"depth":2},{"id":52,"name":"ct_fancy_icon","options":{"ct_id":52,"ct_parent":2,"selector":"fancy_icon-52-1037","original":{"icon-id":"Iconoiricon-cancel","icon-size":"20","position":"absolute","top":"20","right":"20","icon-color":"#7c7c7c","display":"flex"},"nicename":"Icon (#52)","media":{"phone-landscape":{"original":{"icon-size":"20","display":"none"}}},"hover":{"icon-color":"#fbfbfb"},"activeselector":false},"depth":2},{"id":21,"name":"ct_div_block","options":{"ct_id":21,"ct_parent":2,"selector":"div_block-21-1037","original":{"text-align":"left","flex-direction":"row","display":"flex","align-self":"stretch","flex-grow":"1"},"nicename":"Modal Container","media":{"phone-landscape":{"original":{"flex-direction":"column","display":"flex","position":"relative"}}}},"depth":2,"children":[{"id":24,"name":"ct_div_block","options":{"ct_id":24,"ct_parent":21,"selector":"div_block-24-1037","original":{"flex-direction":"column","display":"flex","text-align":"left","align-items":"flex-start","justify-content":"space-between","gap":"16","padding-top":"25","padding-right":"25","padding-bottom":"25","padding-left":"25","height":"100","height-unit":"%","min-height":"320","max-height":"650","align-self":"stretch","flex-shrink":"0","border-right-color":"#2d2f31","border-right-width":"1","border-right-style":"solid"},"nicename":"Left Container","media":{"phone-landscape":{"original":{"max-height-unit":" ","max-height":"unset","min-height":"unset","min-height-unit":" "}}}},"depth":3,"children":[{"id":25,"name":"ct_div_block","options":{"ct_id":25,"ct_parent":24,"selector":"div_block-25-1037","original":{"gap":"16","align-self":"stretch"},"nicename":"Top Container"},"depth":4,"children":[{"id":26,"name":"ct_link","options":{"ct_id":26,"ct_parent":25,"selector":"link-26-1037","original":{"text-align":"left","flex-direction":"row","display":"flex","align-items":"center","justify-content":"space-between","gap":"20","align-self":"stretch","color":"#7c7c7c"},"nicename":"Link Wrapper (#26)","hover":{"color":"#fbfbfb"},"activeselector":false},"depth":5,"children":[{"id":28,"name":"ct_text_block","options":{"ct_id":28,"ct_parent":26,"selector":"text_block-28-1037","original":[],"nicename":"Text (#28)","ct_content":"View Public Profile","classes":["sm-medium"],"activeselector":"sm-medium"},"depth":6},{"id":29,"name":"ct_fancy_icon","options":{"ct_id":29,"ct_parent":26,"selector":"fancy_icon-29-1037","original":{"icon-size":"20","icon-id":"Iconoiricon-nav-arrow-right"},"nicename":"Icon (#29)","activeselector":false},"depth":6}]},{"id":3,"name":"oxy_tabs","options":{"ct_id":3,"ct_parent":25,"selector":"_tabs-3-1037","original":{"tabs_contents_wrapper":"_tabs_contents-10-1037","active_tab_class":"tabs-1213-tab-active","flex-direction":"column","display":"flex","gap":"16","align-self":"stretch","flex-shrink":"0"},"nicename":"Tabs (#3)","activeselector":false},"depth":5,"children":[{"id":4,"name":"oxy_tab","options":{"ct_id":4,"ct_parent":3,"selector":"_tab-4-1037","original":{"display":"none"},"nicename":"BLANK","classes":["tabs-1213-tab","tabs-1213-tab-active"],"activeselector":false},"depth":5,"children":[{"id":7,"name":"ct_text_block","options":{"ct_id":7,"ct_parent":4,"selector":"text_block-7-1037","original":[],"nicename":"Text (#7)","ct_content":"Blank"},"depth":6}]},{"id":5,"name":"oxy_tab","options":{"ct_id":5,"ct_parent":3,"selector":"_tab-5-1037","original":[],"nicename":"Tab (#5)","classes":["tabs-1213-tab","tabs-1213-tab-active"],"activeselector":"tabs-1213-tab"},"depth":5,"children":[{"id":8,"name":"ct_text_block","options":{"ct_id":8,"ct_parent":5,"selector":"text_block-8-1037","original":[],"nicename":"Text (#8)","ct_content":"Personal","classes":["sm-medium"],"activeselector":"sm-medium"},"depth":6},{"id":30,"name":"ct_fancy_icon","options":{"ct_id":30,"ct_parent":5,"selector":"fancy_icon-30-1037","original":{"icon-id":"Iconoiricon-nav-arrow-right","icon-size":"20"},"nicename":"Icon (#30)","activeselector":false},"depth":6}]},{"id":6,"name":"oxy_tab","options":{"ct_id":6,"ct_parent":3,"selector":"_tab-6-1037","original":[],"nicename":"Tab (#6)","classes":["tabs-1213-tab","tabs-1213-tab-active"],"activeselector":"tabs-1213-tab"},"depth":5,"children":[{"id":9,"name":"ct_text_block","options":{"ct_id":9,"ct_parent":6,"selector":"text_block-9-1037","original":[],"nicename":"Text (#9)","ct_content":"Workspace","classes":["sm-medium"],"activeselector":"sm-medium"},"depth":6},{"id":31,"name":"ct_fancy_icon","options":{"ct_id":31,"ct_parent":6,"selector":"fancy_icon-31-1037","original":{"icon-id":"Iconoiricon-nav-arrow-right","icon-size":"20"},"nicename":"Icon (#31)","activeselector":false},"depth":6}]},{"id":17,"name":"oxy_tab","options":{"ct_id":17,"ct_parent":3,"selector":"_tab-17-1037","original":[],"nicename":"Tab (#17)","classes":["tabs-1213-tab","tabs-1213-tab-active"],"activeselector":"tabs-1213-tab"},"depth":5,"children":[{"id":19,"name":"ct_text_block","options":{"ct_id":19,"ct_parent":17,"selector":"text_block-19-1037","original":[],"nicename":"Text (#19)","ct_content":"Enchanced Features","classes":["sm-medium"],"activeselector":"sm-medium"},"depth":6},{"id":33,"name":"ct_fancy_icon","options":{"ct_id":33,"ct_parent":17,"selector":"fancy_icon-33-1037","original":{"icon-id":"Iconoiricon-nav-arrow-right","icon-size":"20"},"nicename":"Icon (#33)","activeselector":false},"depth":6}]}]}]},{"id":35,"name":"ct_link","options":{"ct_id":35,"ct_parent":24,"selector":"link-35-1037","original":{"text-align":"center","flex-direction":"row","display":"flex","align-items":"center","justify-content":"space-between","gap":"20","align-self":"stretch","color":"#ec5962"},"nicename":"Log out","hover":{"color":"#f3797d"},"activeselector":false},"depth":4,"children":[{"id":36,"name":"ct_text_block","options":{"ct_id":36,"ct_parent":35,"selector":"text_block-36-1037","original":[],"nicename":"Text (#36)","ct_content":"Log out"},"depth":5},{"id":37,"name":"ct_fancy_icon","options":{"ct_id":37,"ct_parent":35,"selector":"fancy_icon-37-1037","original":{"icon-size":"20","icon-id":"Iconoiricon-log-out"},"nicename":"Icon (#37)","activeselector":false},"depth":5}]}]},{"id":10,"name":"oxy_tabs_contents","options":{"ct_id":10,"ct_parent":21,"selector":"_tabs_contents-10-1037","original":{"tabs_wrapper":"_tabs-3-1037","flex-direction":"column","display":"flex","text-align":"left","align-items":"flex-start","align-self":"stretch","conditionspreview":"2","globalConditionsResult":true},"nicename":"Tabs Contents (#10)","media":{"phone-landscape":{"original":{"overflow":"hidden","position":"absolute","top":"0","bottom":"0","custom-css":"pointer-events: none;"}}},"activeselector":false},"depth":3,"children":[{"id":11,"name":"oxy_tab_content","options":{"ct_id":11,"ct_parent":10,"selector":"_tab_content-11-1037","original":{"display":"none","custom-css":"display: none !important;"},"nicename":"BLANK","classes":["tabs-contents-1213-tab"],"media":{"phone-landscape":{"original":{"custom-css":"display: none !important;\npointer-events: none !important;"}}},"activeselector":"tabs-contents-1213-tab"},"depth":3,"children":[{"id":14,"name":"ct_text_block","options":{"ct_id":14,"ct_parent":11,"selector":"text_block-14-1037","original":[],"nicename":"Text (#14)","ct_content":"Tab Content #1"},"depth":4}]},{"id":12,"name":"oxy_tab_content","options":{"ct_id":12,"ct_parent":10,"selector":"_tab_content-12-1037","original":[],"nicename":"Tab Content (#12)","classes":["tabs-contents-1213-tab"],"activeselector":"tabs-contents-1213-tab"},"depth":3,"children":[{"id":38,"name":"ct_div_block","options":{"ct_id":38,"ct_parent":12,"selector":"div_block-38-1037","original":[],"nicename":"Div (#38)","classes":["modal-back"],"activeselector":"modal-back"},"depth":4,"children":[{"id":39,"name":"ct_fancy_icon","options":{"ct_id":39,"ct_parent":38,"selector":"fancy_icon-39-1037","original":{"icon-size":"20","icon-id":"Iconoiricon-nav-arrow-left","icon-color":"#f5f5f5","display":"none"},"nicename":"Icon (#39)","activeselector":false,"media":{"phone-landscape":{"original":{"display":"flex"}}}},"depth":5},{"id":15,"name":"ct_text_block","options":{"ct_id":15,"ct_parent":38,"selector":"text_block-15-1037","original":{"color":"#f5f5f5"},"nicename":"Text (#15)","ct_content":"Personal","classes":["xl-medium"],"activeselector":"xl-medium"},"depth":5}]}]},{"id":13,"name":"oxy_tab_content","options":{"ct_id":13,"ct_parent":10,"selector":"_tab_content-13-1037","original":[],"nicename":"Tab Content (#13)","classes":["tabs-contents-1213-tab"],"activeselector":"tabs-contents-1213-tab"},"depth":3,"children":[{"id":43,"name":"ct_div_block","options":{"ct_id":43,"ct_parent":13,"selector":"div_block-43-1037","original":[],"nicename":"Div (#43)","classes":["modal-back"],"activeselector":"modal-back"},"depth":4,"children":[{"id":44,"name":"ct_fancy_icon","options":{"ct_id":44,"ct_parent":43,"selector":"fancy_icon-44-1037","original":{"icon-size":"20","icon-id":"Iconoiricon-nav-arrow-left","icon-color":"#f5f5f5","display":"none"},"nicename":"Icon (#39)","activeselector":false,"media":{"phone-landscape":{"original":{"display":"flex"}}}},"depth":5},{"id":45,"name":"ct_text_block","options":{"ct_id":45,"ct_parent":43,"selector":"text_block-45-1037","original":{"color":"#f5f5f5"},"nicename":"Text (#15)","ct_content":"Workspace","classes":["xl-medium"],"activeselector":"xl-medium"},"depth":5}]}]},{"id":18,"name":"oxy_tab_content","options":{"ct_id":18,"ct_parent":"10","selector":"_tab_content-18-1037","original":[],"nicename":"Tab Content (#18)","classes":["tabs-contents-1213-tab"],"activeselector":"tabs-contents-1213-tab"},"depth":3,"children":[{"id":47,"name":"ct_div_block","options":{"ct_id":47,"ct_parent":18,"selector":"div_block-47-1037","original":[],"nicename":"Div (#47)","classes":["modal-back"],"activeselector":"modal-back"},"depth":4,"children":[{"id":48,"name":"ct_fancy_icon","options":{"ct_id":48,"ct_parent":47,"selector":"fancy_icon-48-1037","original":{"icon-size":"20","icon-id":"Iconoiricon-nav-arrow-left","icon-color":"#f5f5f5","display":"none"},"nicename":"Icon (#39)","activeselector":false,"media":{"phone-landscape":{"original":{"display":"flex"}}}},"depth":5},{"id":49,"name":"ct_text_block","options":{"ct_id":49,"ct_parent":47,"selector":"text_block-49-1037","original":{"color":"#f5f5f5"},"nicename":"Text (#15)","ct_content":"Enchanced Features","classes":["xl-medium"],"activeselector":"xl-medium"},"depth":5}]}]}]}]}]},"classes":{"sm-medium":{"key":"sm-medium","original":{}},"tabs-1213-tab":{"key":"tabs-1213-tab","original":{"padding-top":"0","padding-right":"0","padding-bottom":"0","padding-left":"0","display":"flex","flex-direction":"row","gap":"20","justify-content":"space-between","color":"#7c7c7c"},"hover":{"color":"#fbfbfb"}},"tabs-1213-tab-active":{"key":"tabs-1213-tab-active","original":{"color":"#fbfbfb"}},"tabs-contents-1213-tab":{"key":"tabs-contents-1213-tab","media":{"phone-landscape":{"original":{"custom-css":"pointer-events: auto !important; display: flex !important;","background-color":"#1a1c1e","position":"absolute","top":"0","bottom":"0","transition-duration":"0.3","transition-timing-function":"ease-in-out","transition-property":"all"}}},"original":{"display":"flex","flex-direction":"column","gap":"16","align-items":"flex-start","align-self":"stretch","flex-grow":"1","custom-css":"pointer-events: auto !important;"}},"modal-back":{"key":"modal-back","original":{"text-align":"left","flex-direction":"row","display":"flex","align-items":"center","gap":"8"}},"xl-medium":{"key":"xl-medium","original":{}}}}

Step 1: Incorporate a Modal Element with the following attributes:

  • Backdrop Color: rgba(0,0,0,0.02)
  • Background Color: #1a1c1e
  • Display: Flex
  • Position: Relative
  • Border Radius: 16px
  • Animate On Scroll (AOS): Slide up, 300ms ease-in-out
Step 2: Add a Tab Element and proceed with the following steps:
  • Create a new, initially hidden tab.
  • If not already, expand the Tab Parent and double-click on the new first tab element to edit it.
  • Rename this new tab as "BLANK".
  • Follow the same procedure for the Tabs Contents Parents.

Step 3: Apply styling to the Tab Parent Element:

  • Flex Direction: Column
  • Gap: 16px
  • Align Self: Stretch
  • Flex Shrink: 0

Step 4: Collapse the Tab Parent Element, then encase it in a new Div Element with the following attributes:

  • Flex Direction: Row
  • Align Self: Stretch
  • Flex Grow: 1
  • At a Breakpoint of 768px, adjust the Styling to:
  • Flex Direction: Column
  • Position: Relative

Step 5:  Navigate back to the Full Screen breakpoint, expand the Div Element and move the tabs content into the div. Ensure the Tabs Parent element is positioned above the Content Parent element. Finally, rename the div to “Modal Container”.

Step 6: Once the div is renamed to "Modal Container", encapsulate the Tab Parent only in a new div, with the following attributes:

  • Flex Direction: Column
  • Align Items: Flex-start
  • Justify Content: Space-between
  • Gap: 16px
  • Padding: 25px
  • Height: 100%
  • Min-height: 320px
  • Max-height: 650px
  • Align-self: Stretch
  • Flex-shrink: 0
  • Border-Right: #2d2f31 1px Solid

Step 7: After styling, double-click this div and rename it to "Left Container".

Step 8: Expand the renamed div and once again encase the Tab Parent only in a new div. This allows adding links above or below the tab element for a cohesive look. Name this newly created div "Top Container", with the following settings:

  • Gap: 16px
  • Align self: Stretch

Step 9: Next, ensure you are on the "Top Container" and introduce a link wrapper element inside this div. Position it above or below the Tab parent element, with these features:

  • Flex Direction: Row
  • Align Items: Center
  • Justify Content: Space-between
  • Gap: 20px
  • Align self: Stretch

Step 10: After setting the link wrapper, add a Text Element and an Icon Element within it. Style them as follows:

  • Icon Styling:
    • Icon Size: 20px
    • Icon: Right Arrow
  • Text Styling:
    • Class: "sm-medium"

Step 11: Configure both the static and hover effects for the link wrapper. Choose the link wrapper element and apply these style additions:

  • Default/Static State:
    • Color: #7c7c7c7c
    • Text Align: Left
  • Hover State:
    • Color: #fbfbfb

Step 12: Once the link wrapper styling is complete, collapse the element and expand the Tab Parent Element. Click onto the "BLANK" tab and ensure you're on the tab class "tabs-####-tab" to apply these styles:

  • Padding: 0px
  • Display: Flex
  • Flex direction: Row
  • Gap: 20px
  • Justify content: Space-between

Step 13: After setting the style for the tab class "tabs-####-tab", click and expand the next tab. This step involves creating the tab title and icon.

Step 14: With the tab expanded, add an Icon element below the text element with the following styles:

  • Icon Styling:
  • Icon Size: 20px
  • Icon: Right Arrow

Step 15: Finally, apply hover styling to the tab class "tabs-####-tab":

  • Default/Static State:
    • Color: #7c7c7c
  • Hover State:
    • Color: #fbfbfb

Step 16: After setting the hover style for the tab class "tabs-####-tab", shift your attention to the next tab class "tabs-####-tab-active" and incorporate the following aesthetic details:

  • Color: #fbfbfb

Step 17: After applying the style to the active class, proceed to modify the label of the tab.

Step 18: Once the tab names have been updated, ensure to assign the class “sm-medium” to every text component of the tabs.

Step 19: Proceed to duplicate the above-created icon, positioning one icon component (right arrow) beneath each text element in each tab.

Step 20: Now, navigate to the “BLANK” tab and switch to its specific ID, where you'll apply the following style:

  • Display: None

Step 21: Repeat the previous action for the individual tab content, ensuring you're applying the style to the “BLANK” tab content element's ID.

Step 22: After assigning display: none to both elements’ IDs, organize your workspace by collapsing the Tabs Parent, Tabs Content Parent, and “Top Container” div.

Step 23: Next, select the “Left Container” div and incorporate a link wrapper element with the following styling parameters (for the logout link):

  • Flex Direction: Row
  • Align Items: Center
  • Justify Content: Space-between
  • Gap: 20px
  • Align Self: Stretch

Step 24: Style the link wrapper by adding a Text Element and an Icon Element with the following specifications:

  • Icon:
    • Size: 20px
    • Icon: Log Out
  • Text:
    • Class: “sm-medium”

Step 25: Once done, rename the link wrapper as “Log out”.

Step 26: Now apply hover styling to the newly named link wrapper as follows:

  • State: Default/Static
    • Color: #ec5962
  • State: Hover
    • Color: #f3797d

Step 27: Upon finalizing the hover styling for the “Log out” link wrapper, collapse the “Left Container” div.

Step 28: Select the Tabs Container Parent element and incorporate the following styling:

  • Flex Direction: Column
  • Align Items: Flex-start
  • Align Self: Stretch

Step 29: Expand the parent element, select the “BLANK” container element, switch to its specific ID, navigate to the custom CSS tab and input the following:

  • Display: none !important

Step 30: Navigate to the CSS class “tabs-contents-####-tab” and apply the following styling:

  • Display: Flex
  • Flex Direction: Column
  • Gap: 16px
  • Align Items: Flex Start
  • Align Self: Stretch
  • Flex Grow: 1

Step 31: Return to the “BLANK” container element, ensuring you're working with the container's ID. Switch to the 768px breakpoint, then navigate to the custom CSS tab and include the following:

  • Pointer-events: none !important(Allows the user to click through this element as if it wasn't there. Despite being set to display none, the element still can be clicked)

Step 32: After adding the CSS at the breakpoint, navigate to the class “tabs-contents-####-tab”, return to the full screen breakpoint, and enter the following in the custom CSS tab:

  • Pointer-events: auto !important(Returns the clicking function to all remaining tab content elements)

Step 33: After adding the custom CSS line to the full screen breakpoint of the class “tabs-contents-####-tab”, switch to the 768px breakpoint and add the following to the custom CSS tab:

  • Display: flex !important(This will override the display none that is automatically applied by the class “oxy-tabs-contents-content-hidden”, and will not affect different tabs elements)

Step 34: After incorporating the CSS line into the 768px breakpoint's custom CSS tab, revert to the full screen breakpoint and select the next tab content element.

Step 35: Once you've expanded the tab content element, create a new div and use it to wrap the text element, setting up a title for each tab content section. For visibility, you can activate the next tab if you wish. If you do so, remember to collapse the Tabs Parent element again.

Step 36: Go to the created div wrapping the text element and apply the following styling:

  • Flex Direction: Row
  • Align Items: Center
  • Gap: 8px

Step 37: After styling the div, add an icon element with the following styles:

  • Icon Size: 20px
  • Icon: Left Arrow

Step 38: Position the styled icon above the text element. Then assign the class “modal-back” to the recently created div and optionally transfer the div's ID styling to the class.

Step 39: Revisit the div and apply a color style (#f5f5f5) to each element (text and icon). Also, assign the class “xl-medium” to the text element.

Step 40: After updating the text and assigning a class to the text element, duplicate the div housing the left arrow and the text, and place them in each tab content element. Remember to update the duplicated titles to match each corresponding tab title.

Clean up your structure area by collapsing the Tabs Parent Element.

Step 41: Navigate to the class "tabs-contents-####-tab", switch to the 768px breakpoint and apply these styles:

  • Background color: #1a1c1e
  • Position: absolute
  • Top: 0
  • Bottom: 0
  • Transition
    • Duration: 0.3sec
    • Timing Function: ease-in-out
    • CSS Property: all

Step 42: Temporarily add the class "oxy-tabs-contents-content-hidden" and apply the following style:

  • Effect > Transform > Translate > X: 100%

Step 43: After applying the style, remove the "oxy-tabs-contents-content-hidden" class from the tab content element.

Step 44: Navigate to the Tabs Contents Parent element. Ensure you're on the element's ID and apply the following styles to the 768px breakpoint:

  • Overflow: Hidden
  • Position: Absolute
  • Top: 0
  • Bottom: 0

Step 45: Select the main modal element, remaining at the 768px breakpoint, and apply the following styles:

  • Width: 100%
  • Height: 100%
  • Min-Height: 50vh
  • Max-Height: 85vh
  • Position: absolute
  • Bottom: 0
  • Border Radius: 0 for Bottom Left and Bottom Right

Step 46: For better visibility, navigate to the Tabs Contents Parent Element and click the eye to hide the element.

Step 47: Navigate to the "Left Container" div while still on the 768px breakpoint and apply the following styles:

  • Min-height: unset
  • Max-height: unset

Step 48: Click on the main modal element and add a code box. In the JavaScript section, paste in the required code. Be sure to modify the selectors to match the IDs of the Tab Contents Parent Element, Tabs Parent Element, and the active class from the tab element respectively.

jQuery(document).ready(function($) {
    $('.modal-back').click(function() {
        $('#_tabs_contents-10-1037').children().each(function() {
            if(!$(this).hasClass('oxy-tabs-contents-content-hidden')) {
                $(this).addClass('oxy-tabs-contents-content-hidden');
            }
        });

        $('#_tabs-3-1037').children().each(function() {
            if($(this).hasClass('tabs-1213-tab-active')) {
                $(this).removeClass('tabs-1213-tab-active');
            }
        });
    });
});

Step 49: Navigate to the Tabs Contents Parent Element, switch to the 768px breakpoint, go to the custom CSS tab and add "pointer-events: none;".

 

.sm-medium {
  font-size: 0.875rem;
  font-weight: 500;
  font-style: normal;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
}
   
.xl-medium {
  font-size: 1.25rem;
  font-weight: 500;
  font-style: normal;
  line-height: 28px;
  text-decoration: none;
  text-transform: none;
}

 

**Optional Steps:**

 

Step 50: To allow users to swipe down to close the modal on mobile devices, add the required jQuery to the JavaScript section of the code block. Be sure to replace #modal-26-2926 with your modal's ID.

jQuery(document).ready(function($) {
    var start_y;
    $('#modal-26-2926').on('touchstart', function(e) {
        start_y = e.originalEvent.touches[0].pageY;
    }).on('touchend', function(e) {
        var end_y = e.originalEvent.changedTouches[0].pageY;
        if(end_y - start_y > 85) { // arbitrary threshold, increase or decrease as necessary
            $('.oxy-close-modal').click();
        }
    });
});

Step 51: To add a close button for the modal, follow these steps:

  • Select the modal element.
  • Add an icon element and apply the following styles (ensure the breakpoint is set to full screen):
  • Icon Size: 20px
  • Icon: Close
  • Position: Absolute
  • Top: 20
  • Right: 20
  • State: Default/Static > Color: #ec5962
  • State: Hover > Color: #f3797d
  • Finally, set the display to none on the 768px breakpoint.

Step 52: When viewing at full screen, if you notice the left arrow icons are visible in the titles of the individual content elements, hide them by setting their display to none. Don't forget to switch back to flex on the 768px breakpoint.

Share this post