Search Boxes
You can enable two search boxes in your Heretto Portal: one in the header and one in the hero section.
Header Search Box
The header search box is typically displayed on mobile devices.
You can modify the styling by editing the .ezd-portal_app-bar_search-wrapper CSS class.
Alternatively, you can override styling and settings by editing the config.json file. To learn more about editing Heretto Portal settings, refer to Customize the Heretto Portal Settings.
There is a collapsed state for the appBar search: .ezd-portal_app-bar_search-collapse for CSS and appBarSearchCollapse for config.json. It is used to determine whether or not the search icon has been clicked (desktop) or tapped (mobile) to expose the search bar. You can modify the icon with a CSS class .ezd-portal_app-bar_search-icon or with appBarSearchIcon in config.json.
The display and positioning properties for the collapsed state can be overridden to always show on desktop.
Below, you can see example search box modifications introduced in the config.json file:
"appBarSearchWrapper": {
[MIN_S]: {
"transition": "all 500ms",
"margin": "0.25rem",
"height": "100%",
"flexBasis": "24rem",
"flex": "0",
"&:hover, &:active": {
"flex": "1"
}
},
},
"appBarSearchBox": {
"height": "100%",
"display": "flex",
"flexDirection": "row-reverse",
[MAX_S]: {
"width": "calc(100vw - 6rem)",
}
},
"hero": {
"display": "none"
},
"heroSearchWrapper": {
"display": "none"
}They result in the following search behavior on desktop:
Note that the dark styling has been applied separately.
Hero Search Box
The search input in header is typically displayed on tablets and higher-resolution screens. You can hide or modify it by editing the .ezd-portal_hero_search-wrapper CSS class or the heroSearchWrapper object in config.json.