On March 5th, we released our new version of search to improve how you, your teams, and your community search and discover relevant content. We've added more content types, private data, faster and more reliable search indexing, a new look, and new ways to refine your search, including search collections across the top of the results page.
Now you have a custom header and you were styling the search page or using CSS to hide our navigation bar, you may encounter some oddities on the search results page. While we strongly recommend not hiding our navigation bar as we use it to place new navigation features, here's a few things to watch out for in your custom header CSS if you're noticing a weird layout.
Styling the Search Page with CSS
Unfortunately, this page is not intended to be styled. If you were able to figure out how to style it in the older version of search, you benefited from a bug that occurred in the custom header. I won’t be explaining how to work around our new version as we’re actually very close to fixing that bug and it would just undo your work all over again. So please stick to the hub site and hub page layout screens when doing CSS for webpage layout purposes.
Search Icon Visible in Your Header
If you were hiding our navigation by placing your custom header on top of it either through absolute positioning, negative margins, flex, and/or use of a z-index, you may need to change your z-index to an even higher number (e.g. 1200) to get the search icon to hide. However, be warned that we’re doing some updates to navigation, which will be coming out at the end of the month and should you want to use the improved navigation, you will need to change your z-index back to 900; otherwise, you may observe the autosuggest from our search bar drop behind your custom header.
If you’re using negative margins like the example above, you may need to adjust them based on the size of your header to compensate for the collections' links.
It can be challenging to get your custom header to look exactly as you want in our interface, but if possible, please try to avoid using negative margins and absolute positioning as both are inflexible layout methods and more likely to break your site styling when we release new features. Unfortunately, try as we do, we cannot always predict the impact of custom styling on new features.
If you were hiding our navigation through use of display:none and using absolute or fixed positioning to manage your custom header, then you may not have search collections visible at all. This is because when you hide components using display:none, they do not take up any space, and as such, the beginning of your page content will start much closer to top edge of the page. If you used fixed or absolute positioning in addition to display:none, your header will cover up the top of your page content and in this case, it’s the search collections.
If you change display:none to visibility:hidden, the content you are trying to hide will not show, but it will take up the same amount of space, which will result in a layout more similar to the intended experience of sites that aren't hiding navigation. The caveat for visibility:hidden is that it will not, in fact, hide the content from assistive technologies, so those using screen-readers will still be able to explore that part of your page.