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-transparent
orbg-primary
) - navbarStyle - Sets the color and styling of the navbar links and content. Use either
navbar-dark
ornavbar-light
. - navbarBrandColor - Sets the color of the
.navbar-brand
element. Works with text or SVG (ex:text-white
ortext-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-primary
orbtn-secondary
). - navbarContainer - Defines the container type of the navbar content. Use either
container
orcontainer-fluid
for a fluid width layout. - navbarPosition - Sets the navbar positioning. Use either
fixed-top
or keep blank.