Digi Product API Services
The .navbar-marketing component is used throughout SB UI Kit Pro. A Pug mixin is used to include it with each page. The content of the navbar itself can be modified within the mixin itself, which is located in the src/pug/pages/mixins/navbar.pug file. Modifying this file is where you will update the navbar items, the items within the navbar dropdowns, and which pages these items point to.
When including the navbar within a page, you can do so by using the Pug mixin. By default, a Pug mixin will look as follows:
include mixins/navbar.pug
+navbar({
navbarBg: 'bg-transparent',
navbarStyle: 'navbar-dark',
navbarBrandColor: 'text-white',
navbarBtnColor: 'btn-teal',
navbarContainer: 'container',
navbarPosition: 'fixed-top'
})Configuration Options
- navbarBg - Sets the background color of the navbar. Use any background color utility class (ex:
bg-transparentorbg-primary) - navbarStyle - Sets the color and styling of the navbar links and content. Use either
navbar-darkornavbar-light. - navbarBrandColor - Sets the color of the
.navbar-brandelement. Works with text or SVG (ex:text-whiteortext-dark). when using an SVG, the fill color of the SVG must not be set so it will inherit it's fill color from the parent text color - navbarBtnColor - Sets the color of the button in the navbar. Use any button color class (ex:
btn-primaryorbtn-secondary). - navbarContainer - Defines the container type of the navbar content. Use either
containerorcontainer-fluidfor a fluid width layout. - navbarPosition - Sets the navbar positioning. Use either
fixed-topor keep blank.