CSS Classes

*** 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

© 2024 foreUP Design Gallery | Designed and Hosted by foreUP