Skip to main content

Duda Troubleshooting

This page covers common problems with the Site Search 360 widget on Duda sites. Most of them happen because your Duda theme styles headings, fonts and links across the whole site, and those styles also reach the search box, the suggestions dropdown or the search results. You can fix those with a short CSS override. The others need a change in the Duda editor instead.

Style conflicts with your Duda theme​

These problems are fixed with a short CSS override.

How do I add a CSS fix to my Duda site?​

  1. Go to Duda Site Editor > Developer Mode > Site HTML/CSS > site.css.
  2. Paste the CSS at the end of the file.
  3. Publish your site.

Change the font names, pixel sizes and colors in the examples below to match your site. For more about custom CSS in Duda, see Adding Custom CSS. For more classes you can target, see Additional CSS.

Why do the search results use a different font?​

The search results take your site's main body font, which may not match the rest of your design. To set the results font yourself, add this CSS:

section#ss360-layer {
  font-family: 'Source Sans Pro', sans-serif;
}

Why are suggestion titles in the dropdown too large or spaced out?​

The suggestions dropdown sits in your site header, so your theme's heading styles apply to it. They can change the size, weight, line spacing and margins of the suggestion titles. To reset all of them, add this CSS:

#unibox-suggest-box h3.unibox__selectable-title {
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

Keep !important in this override. Your theme's heading styles outrank the search styles, so the override has no effect without it.

Why do the search box and dropdown use a different font from the results?​

The search box and suggestions dropdown use your theme font, while the search results use your body font. To give the search box and dropdown a font and size of your choice, add this CSS:

.ss360-custom-search .ss360-custom-search__searchbox,
#unibox-suggest-box {
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 16px !important;
}

Why is the placeholder text in the search box hard to read?​

By default, the placeholder text in the search box (for example, "Search...") is very light gray. To make it darker, add this CSS:

.ss360-custom-search .ss360-custom-search__searchbox::placeholder {
  color: #767676 !important;
}

Display and indexing problems​

These problems aren't caused by CSS and need a change in Duda instead.

Why doesn't the search bar appear on mobile?​

Duda can use a different header for each device. If you added the Site Search 360 widget only to the desktop header, it doesn't show on phones or tablets.

To fix it, switch the Duda editor to the tablet and mobile views and add the widget to those headers as well.

Why does search find nothing in the Duda editor or preview?​

Site Search 360 indexes your published site, not drafts in the Duda editor. Publish your site first, then re-index your project in the Site Search 360 Control Panel.

Why is the suggestions dropdown hidden behind another element?​

The suggestions dropdown sits inside your site header, so it can never show above elements that Duda places above the header, such as some popups and banners.

To fix it, move or hide the element that covers the dropdown, or position that element lower on the page.

Raising the dropdown's z-index doesn't help. The dropdown can't rise above the header it sits in.