*** Sliders – Spectra ***
All these classes are for the slider block and can be combined or used separately:
.custom-navigation.top-right-navigation – Apply styles and position to the default nav
Navigation:
.custom-navigation – Apply this class to change the default slider styling
.bottom-dots – Apply this to apply the dotnav styling
.top-right-navigation – Apply this class to change the default nav position to the top right edge of the slider
*** Course Tour Styling – Spectra ***
Course Tour Fixed Top Menu:
.tour-menu – Apply this class to a spectra “table of content” block and add the functionality to be fixed on scroll
Course Tour Styles – Tabs Version:
.course-tour – Apply this class to the “tab” spectra block to add the styles and functionality to the menu
Course Tour Styles – The Full Size Image Version:
.course-tour-full-img – Apply this class to the spectra “tab” block to add the styles and functionality to the menu
Mobile Menu – Tab after 6 Items:
.mobile-tab-menu – Apply this class if you want to change the navigation to a mobile menu for “tab” spectra blocks with more than 6 items
*** Grids – Mobile ***
Apply these classes to change the layout of the default columns on mobile (applies only until 500px, for screens from 959px):
.grid.grid-container-two – For Two Columns
.grid.grid-container-three – For Three Columns
.grid.grid-container-four – For Four Columns
.grid.grid-container-five – For Five Columns
.grid.grid-container-six – For Six Columns
*** Columns ***
Apply this class to change the default behavior of the columns on mobile so they stack in the correct order (for screens from 959px):
.mobile-reverse-column – Reverse columns on mobile
*** Shadows ***
.medium-shadow – Apply a medium-size shadow to an object or group
*** Visibility ***
Apply to hide elements on mobile (for screens from 959px):
.hide-on-mobile – Hide content on mobile
*** Mobile Align Content ***
Apply to align content, groups on mobile (for screens from 959px):
.mobile-content-align-start – Align content left
.mobile-content-align-end – Align content right
.mobile-content-align-center – Align content center
*** Mobile Align Text ***
Apply to align text on mobile (for screens from 959px):
.mobile-text-align-right – Align text right
.mobile-text-align-left – Align text left
.mobile-text-align-center – Align text center
*** Full Size ***
.mobile-full-width – Apply to make a block or object 100% width on mobile
.full-width – Apply to make a block or object 100% width on mobile
*** Paddings ***
.padding-top-remove – Remove padding top
.padding-bottom-remove – Remove padding bottom
.padding-right-remove – Remove padding right
.padding-left-remove – Remove padding left
*** Margins ***
.margin-top-remove – Remove margin top
.margin-bottom-remove – Remove margin bottom
.margin-right-remove – Remove margin right
.margin-left-remove – Remove margin left
*** Footer ***
.footer-menu – Used to hide the submenu dropdown on the footer menu
