Navigation Bar Theme Settings

The examples in this setting are the default theme's values.

position

CSS variable: --lia-nav-position

"position" : "sticky",

background

CSS variable: --lia-nav-bg

See the background fields table for more information.

"background" : {
  "color" : "var(--lia-bs-white)"
},

Background Fields Table

Field Name	Description
attachment	Background-attachment CSS property for the image. Possible values are: SCROLL, FIXED, LOCAL
clip	Background-clip CSS property for the image. Possible values are: BORDER_BOX, PADDING_BOX, CONTENT_BOX
color	Background color
imageAssetName	The asset name of the background image
imageLastModified	The last update time for the asset
origin	Background-origin CSS property for the image. Possible values are: BORDER_BOX, PADDING_BOX, CONTENT_BOX
position	Position of the image.
repeat	Repeat CSS property for the image. Possible values are: NO_REPEAT, REPEAT, REPEAT_X, REPEAT_Y
size	Size property for image.

paddingTop

CSS variable: --lia-nav-pt

"paddingTop" : "15px",

paddingBottom

CSS variable: --lia-nav-pb

"paddingBottom" : "15px",

borderBottom

CSS variable: --lia-nav-border-bottom

"borderBottom" : "1px solid var(--lia-bs-border-color)",

boxShadow

CSS variable: --lia-nav-box-shadow

"boxShadow" : "var(--lia-bs-box-shadow-sm)",

brandMarginRight

CSS variable: --lia-nav-brand-mr

"brandMarginRight" : "30px",

brandMarginRightSm

CSS variable: --lia-nav-brand-mr-sm

"brandMarginRightSm" : "10px",

brandLogoHeight

CSS variable: --lia-nav-brand-logo-height

"brandLogoHeight" : "30px",

linkGap

CSS variable: --lia-nav-link-gap

"linkGap" : "10px",

linkJustifyContent

CSS variable: --lia-nav-link-justify-content

"linkJustifyContent" : "flex-start",

linkPaddingY

CSS variable: --lia-nav-link-py

"linkPaddingY" : "5px",

linkPaddingX

CSS variable: --lia-nav-link-px

"linkPaddingX" : "10px",

linkDropdownPaddingY

CSS variable: --lia-nav-link-dropdown-py

"linkDropdownPaddingY" : "9px",

linkDropdownPaddingX

CSS variable: --lia-nav-link-dropdown-px

"linkDropdownPaddingX" : "var(--lia-nav-link-px)",

linkColor

CSS variable: --lia-nav-link-color

"linkColor" : "var(--lia-bs-body-color)",

linkHoverColor

CSS variable: --lia-nav-link-hover-color

"linkHoverColor" : "var(--lia-bs-primary)",

linkFontSize

CSS variable: --lia-nav-link-font-size

"linkFontSize" : "var(--lia-bs-font-size-sm)",

linkFontStyle

CSS variable: --lia-nav-link-font-style

"linkFontStyle" : "NORMAL",

linkFontWeight

CSS variable: --lia-nav-link-font-weight

"linkFontWeight" : "400",

linkTextTransform

CSS variable: --lia-nav-link-text-transform

"linkTextTransform" : "NONE",

linkLetterSpacing

CSS variable: --lia-nav-link-letter-spacing

"linkLetterSpacing" : "normal",

linkBorderRadius

CSS variable: --lia-nav-link-border-radius

"linkBorderRadius" : "var(--lia-bs-border-radius-sm)",

linkBgColor

CSS variable: --lia-nav-link-bg-color

"linkBgColor" : "transparent",

linkBgHoverColor

CSS variable: --lia-nav-link-bg-hover-color

"linkBgHoverColor" : "transparent",

linkBorder

CSS variable: --lia-nav-link-border

"linkBorder" : "none",

linkBorderHover

CSS variable: --lia-nav-link-border-hover

"linkBorderHover" : "none",

linkBoxShadow

CSS variable: --lia-nav-link-box-shadow

"linkBoxShadow" : "none",

linkBoxShadowHover

CSS variable: --lia-nav-link-box-shadow-hover

"linkBoxShadowHover" : "none",

linkTextBorderBottom

CSS variable: --lia-nav-link-text-border-bottom

"linkTextBorderBottom" : "none",

linkTextBorderBottomHover

CSS variable: --lia-nav-link-text-border-bottom-hover

"linkTextBorderBottomHover" : "none",

dropdownPaddingTop

CSS variable: --lia-nav-dropdown-pt

"dropdownPaddingTop" : "10px",

dropdownPaddingBottom

CSS variable: --lia-nav-dropdown-pb

"dropdownPaddingBottom" : "15px",

dropdownPaddingX

CSS variable: --lia-nav-dropdown-px

"dropdownPaddingX" : "10px",

dropdownMenuOffset

CSS variable: --lia-nav-dropdown-menu-offset

"dropdownMenuOffset" : "2px",

dropdownDividerMarginTop

CSS variable: --lia-nav-dropdown-divider-mt

"dropdownDividerMarginTop" : "10px",

dropdownDividerMarginBottom

CSS variable: --lia-nav-dropdown-divider-mb

"dropdownDividerMarginBottom" : "10px",

dropdownBorderColor

CSS variable: --lia-nav-dropdown-border-color

"dropdownBorderColor" : "hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.08)",

controllerBgHoverColor

CSS variable: --lia-nav-controller-bg-hover-color

"controllerBgHoverColor" : "hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.1)",

controllerIconColor

CSS variable: --lia-nav-controller-icon-color

"controllerIconColor" : "var(--lia-bs-body-color)",

controllerIconHoverColor

CSS variable: --lia-nav-controller-icon-hover-color

"controllerIconHoverColor" : "var(--lia-bs-body-color)",

controllerHighlightColor

CSS variable: --lia-nav-controller-icon-highlight

"controllerHighlightColor" : "hsla(30, 100%, 50%)",

controllerHighlightTextColor

CSS variable: --lia-nav-controller-icon-highlight-text

"controllerHighlightTextColor" : "var(--lia-yiq-light)",

controllerBorderRadius

CSS variable: --lia-nav-controller-border-radius

"controllerBorderRadius" : "var(--lia-border-radius-50)",

hamburgerColor

CSS variable: --lia-nav-hamburger-color

"hamburgerColor" : "var(--lia-nav-controller-icon-color)",

hamburgerHoverColor

CSS variable: --lia-nav-hamburger-hover-color

"hamburgerHoverColor" : "var(--lia-nav-controller-icon-color)",

hamburgerBgColor

CSS variable: --lia-nav-hamburger-bg-color

"hamburgerBgColor" :