I need to match the main navigation container to match our wider UI style of underline rather than pill (Retool default)
This CSS worked for me. Just add it to the Custom CSS terminal in App Settings.
Let me know if this helps, or reach out with any questions.
Just change the #HEX...etc, Focus state is still the default Retool setting from the main style set-up
/* Target the main navigation container /
._navigation_akf1o_64 {
display: flex;
gap: 16px; / Adjust spacing between tabs */
}
/* Remove pill styling and add underline /
._pill_1dvlx_89 {
background: none !important; / Remove pill background /
border-radius: 0 !important; / Remove rounded corners /
padding: 5px 10px !important; / Adjust padding /
border-bottom: 2px solid transparent !important; / Default transparent underline */
transition: border-color 0.3s ease-in-out;
}
/* Underline effect on hover /
._pill_1dvlx_89:hover {
border-bottom: 2px solid #595959 !important; / Blue underline on hover */
}
/* Add a bold underline for the active page /
._highlight_1dvlx_86 {
border-bottom: 3px solid #5AF5FA !important; / Thicker underline for active tab /
font-weight: bold !important;
color: #F7f7f7 !important; / Blue text for active tab */
}