UI.X 2
Basic Options
General
Mobile active navigation title - Adds a short version of the active navigation to the header when navigation links collapse to the canvas navigation.
Image path - This sets the path to the themes main images directory. This will generally be "styles/themeName." This is useful in case you later change where your main images directory is.
- The purpose of this component is to display the active navigation when the navigation component is hidden away.
- This component only shows when the viewport width is above Narrow responsive break point and below Navigation collapse width.
- This value of the text is, by default, the title of the selected nav entry when applicable. However, the text can. be overwritten on a per-content-template basis using a helper, which can be found here.
Navigation logo vertical spacing - The max height of the navigation logo is the height of the navigation bar minus these spacings, however it may be smaller when there is not enough horizontal width.
Logo width - Sets the width for logo. (Note: Only applicable for logos in the header logo row. For logos in the navigation, use "Navigation logo vertical spacing" instead.)
- This width is only used when the logo is in the Header row (formerly Log Block in XF1). To set the width of your logo when in navigation, use Logo Width (navigation).
- Note: The logo size will not exceed the natural dimensions of the image.
Logo hierarchy
There are 3 different URL paths for logos, as well as logo text/icon. The following guide shows the hierarchy for logo components. The highest numbered item will be shown, with the rest being the fallbacks in order:
- Logo small (under the Logo breakpoint viewport width only)
- 2x logo URL
- Logo URL
- Logo text/icon
Defines the location of various commonly-used assets etc.
Responsive Logo
Logo small image path - Sets the path to your themes small logo variation.
- This allows you to set a smaller logo, primarily for smaller viewport widths where large logos do not fit well
- This image replaces the general logo in whichever location it is in at the Logo breakpoint
Logo breakpoint - Max viewport width to switch to the brandmark image. Use 100% for always, 0 for never, and other values in pixels.
Logo breakpoint - Max viewport width to switch to the brandmark image. Use 100% for always, 0 for never, and other values in pixels.
Text logo
Logo text - Sets the text value when text logo is applicable. Please note: this is overwritten when a logo image path is set.
Logo Icon - Adds a CSS font icon when logo text is applicable. IE: mdi mdi-layers
Responsive logo font size - Sets the font size of the logo text for mobile.
Logo text breakpoint - The device width under which the logo text changes font-size.