Custom Navigation Bar Code Examples | Yext Hitchhikers Platform
Updating Font Color
To change the color of the nav bar text, you can add the following to the answers-variables.scss file:
--yxt-nav-text-color: red; You could also use the following css, but you will need to target each part of the navigation bar as well as the hover state if you want similar colors and behaviors as above. .yxt-Nav-item allows you to change the color of the default nav bar labels and .yxt-Nav-item.is-active lets you change the color of the navigation bar label and its bottom border once a vertical is clicked.
.yxt-Nav-item {
color: orange;
&:hover {
color: red;
}
}
.yxt-Nav-item.is-active {
color: red;
border-bottom-color: red;
}
Hide A Vertical From the Navigation Bar
You have the option to remove a vertical page and have it only show in Universal search. If you want to remove something from the links vertical you need to remove your links.html.hbs and links.json files, and place the configuration for your links vertical in your index.json file, under verticalsToConfig.
"links": { // The vertical key from your search configuration
// "label": "", // The name of the vertical in the section header and the navigation bar
// "verticalLimit": 15, // The result count limit for vertical search
// "universalLimit": 5, // The result count limit for universal search
"cardType": "link-standard", // The name of the card to use - e.g. accordion, location, customcard
"icon": "link", // The icon to use on the card for this vertical
"universalSectionTemplate": "standard"
}You likely would also want to hide the View All button in the Links vertical, so that users aren’t directed to a dead page. You can use the following css as an example.
.HitchhikerResultsStandard--links .HitchhikerResultsStandard-viewMore {
display: none;
}