Update: here is my menu structure. Note I can't access your mega menu for some reason. The menu items is a language switcher from WPML
Please help! I tried coding it with the following CSS, but the secondary menu stays ugly. I want it white background, black type. Clean. And hover a nice underline.
/* Style the main language switcher item */ .wpml-ls-item { border: none !important; padding: 10px 15px !important; background-color: #fff !important; color: #000 !important; }
/* Style the dropdown menu */ .wpml-ls-sub-menu { border: none !important; background-color: #fff !important; box-shadow: none !important; /* Remove the black border */ }
/* Style the dropdown menu items */ .wpml-ls-sub-menu a { color: #000 !important; background-color: #fff !important; padding: 10px 15px !important; }
/* Style the dropdown menu items on hover */ .wpml-ls-sub-menu a:hover { color: #000 !important; /* Change the hover color to black */ background-color: #f8f8f8 !important; }
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hi Tahir, my client wants a different button, like the example below. Not the arrow down and up. How can I make this with Salient? So people understand they can click on it.
Does the translation plugin provide this option? The translation plugin is what handles this. You can reach out to their support team and circle back to us with their response or any other queries they have.
Hi there, I am having a hard time where to stylize your dropdown. Where can I do this in Salient?
See screenshot-
- I want white background, black type
- And preferable see other styles of dropdown, not separately floating like this
Can you help please?
Chat4 says the code below, but it must be a simple setting in Salient
/* Change the background color of the dropdown */
#top-nav ul li.menu-item-language ul {
background-color: #fff !important;
}
/* Change the text color in the dropdown */
#top-nav ul li.menu-item-language ul a {
color: #000 !important;
}
Attached files: Screenshot 2023-06-27 at 07.32.29.jpg
Update: here is my menu structure. Note I can't access your mega menu for some reason.
The menu items is a language switcher from WPML
Please help! I tried coding it with the following CSS, but the secondary menu stays ugly. I want it white background, black type. Clean. And hover a nice underline.
/* Style the main language switcher item */
.wpml-ls-item {
border: none !important;
padding: 10px 15px !important;
background-color: #fff !important;
color: #000 !important;
}
/* Style the dropdown menu */
.wpml-ls-sub-menu {
border: none !important;
background-color: #fff !important;
box-shadow: none !important; /* Remove the black border */
}
/* Style the dropdown menu items */
.wpml-ls-sub-menu a {
color: #000 !important;
background-color: #fff !important;
padding: 10px 15px !important;
}
/* Style the dropdown menu items on hover */
.wpml-ls-sub-menu a:hover {
color: #000 !important; /* Change the hover color to black */
background-color: #f8f8f8 !important;
}
Attached files: Screenshot 2023-06-27 at 07.52.05.jpg
Hey Again,
You can adjust the color scheme in here:
Thanks.
ThemeNectar Support Team
How could I have missed that, thank you Tahir!!
Now how can I change the shape / look of the secondary navbar?
Right it's square shaped with a black division line
What exactly do you wish to change ?.
ThemeNectar Support Team
Hi Tahir, thanks for getting back to me. Here a screenshot of the current menu.
How could I
- Change the line color of the division
- Give the secondary bar rounded corners
Or style it like your example below. However, since it's a language Switcher I can't style it Bakerey it seems?
Attached files: Screenshot 2023-06-27 at 12.40.19.jpg
Screenshot 2023-06-27 at 12.42.00.jpg
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.wpml-ls-item ul.sub-menu.tracked-pos { border-radius: 10px !important; border-top: 0px !important; }Thanks
ThemeNectar Support Team
That worked great!
Hi Tahir, my client wants a different button, like the example below. Not the arrow down and up. How can I make this with Salient? So people understand they can click on it.
Attached files: Screenshot 2023-06-30 at 08.43.41.jpg
Hello again,
Thank you for getting back to us.
Does the translation plugin provide this option? The translation plugin is what handles this. You can reach out to their support team and circle back to us with their response or any other queries they have.
We look forward to your response.
Kind regards,