Canvas Support

color of language drop dowm in header

3 replies·opened Jun 7, 2023
D
dendaashans-peterJun 7, 2023

Hello,

I would like to change the color of the text of the language dropdown in the header. Now the contrast with the image is to low.

What can I do?

Thank you,

Hans-Peter

S
SemiColonWebSTAFFJun 8, 2023

Hello,

Highly recommend you to use this code instead:

<div class="header-misc">
	<div class="dropdown me-lg-0">
		<a href="#" class="btn btn-sm bg-transparent dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">EN</a>
		<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu1" style="--bs-dropdown-min-width:5rem;">
			<a class="dropdown-item d-flex align-items-center" href="#"><img src="images/icons/flags/french.png" alt="Français" class="me-2"> FR</a>
			<a class="dropdown-item d-flex align-items-center" href="#"><img src="images/icons/flags/german.png" alt="German" class="me-2"> DE</a>
			<a class="dropdown-item d-flex align-items-center" href="#"><img src="images/icons/flags/italian.png" alt="Italian" class="me-2"> IT</a>
		</ul>
	</div>
</div>

Better accessibility and more responsive, so will result in better UX.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

D
dendaashans-peterJun 8, 2023

Thank you!

I prefer much smaller icons and dropdown on hover instead of on click. That was the reason I miss-used the topbar version I found somewhere.

Is that possible?

S
SemiColonWebSTAFFJun 9, 2023

Hello,

Yes, absolutely this is possible! :)

  1. Use this CSS in the css/custom.css File:
.top-links {
	--cnvs-topbar-border-size: 1px;
	--cnvs-topbar-border-color: rgba(var(--cnvs-contrast-rgb), 0.1);
	--cnvs-topbar-submenu-padding: 0.625rem;
	--cnvs-topbar-submenu-font-size: 0.75rem;
}
  1. Use this HTML:
<div class="header-misc">
	<div class="top-links on-click">
		<ul class="top-links-container">
			<li class="top-links-item"><a href="#">EN</a>
				<ul class="top-links-sub-menu">
					<li class="top-links-item"><a href="#"><img src="images/icons/flags/french.png" alt="French"> FR</a></li>
					<li class="top-links-item"><a href="#"><img src="images/icons/flags/italian.png" alt="Italian"> IT</a></li>
					<li class="top-links-item"><a href="#"><img src="images/icons/flags/german.png" alt="German"> DE</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard