---
title: "Ascend – Edit Topbar Search Font"
source: "https://docs.nexcess.com/software/kadence/ascend-edit-topbar-search-font/"
description: "If your topbar search is assigned to your topbar widget area through Appearance> Widgets and you're having a difficult time seeing the text, use this CSS to adj…"
vertical: "Software"
area: "Kadence"
date: "2021-08-17"
last_modified: "2026-07-06"
---

# Ascend – Edit Topbar Search Font

If your topbar search is assigned to your topbar widget area through Appearance> Widgets and you’re having a difficult time seeing the text, use this CSS to adjust the font as needed:

```
#topbar input.search-field, #topbar form.search-form .search-submit {
color:white;
}
#topbar input.search-field::-webkit-input-placeholder{
color: white;
}
#topbar input.search-field::-moz-placeholder {
color: white;
}
#topbar input.search-field:-ms-input-placeholder {
color: white;
}
```

#### Default Search Text:

[![topbar search placeholder font ascend theme](https://docs.nexcess.com/wp-content/uploads/2026/07/HeaderSearchDefault-min.jpeg)](https://docs.nexcess.com/wp-content/uploads/2026/07/HeaderSearchDefault-min.jpeg)

#### Search Text With CSS:

[![topbar search font ascend theme](https://docs.nexcess.com/wp-content/uploads/2026/07/HeaderSearchCSS-min.jpeg)](https://docs.nexcess.com/wp-content/uploads/2026/07/HeaderSearchCSS-min.jpeg)