Archived topic
Change Font Weight on secondary menu and opacity of svg logo on hover
9 replies · Started by Justin on September 19, 2022
Hi
I'm trying to work out how to change the font weight of my secondary nav menu (top nav on my site) along with making a svg icon change its opacity when hovered over (it's situated on the primary nav using a hook [generate_after_primary_menu]. Could someone help with the CSS for this? Link to site https://www.exclusivecarcare.co.uk/
Many thanks
Hi Justin,
You can control the typography of secondary navigation at customzier > typography > typography manager, add secondary menu items:
https://www.screencast.com/t/Do1L8KxhQ
For the SVG, go to the block element, select the button block(not buttons block), add an additional CSS class, eg. google-review, then add this CSS:
a.gb-button.google-review:hover {
opacity: 0.5;
}Thank you for the swift response Ying
The code you gave doesn't seem to work for the SVG Icon
Your previous CSS is missing a closing bracket in either of the places I marked:
https://www.screencast.com/t/QCZ8NqvIe1t
Without the }, my CSS will not work.
hi Ying
very strange as I just checked and closing brackets are not missing
Can you copy and paste all your CSS here and wrap it with the CODE tag?
`.grecaptcha-badge {
visibility: hidden;
}
@media (max-width: 768px) {
nav#secondary-navigation {
display: none;
}
}
@media (max-width: 768px){
button.menu-toggle {
font-size: 25px !important;
}
.main-navigation .menu-toggle {
color: orange;
}
a.gb-button.google-review:hover {
opacity: 0.5;
}
That's exactly what I meant, you've missed a } in your CSS.
This part:
@media (max-width: 768px){
button.menu-toggle {
font-size: 25px !important;
}
.main-navigation .menu-toggle {
color: orange;
}
a.gb-button.google-review:hover {
opacity: 0.5;
}Should've been:
@media (max-width: 768px){
button.menu-toggle {
font-size: 25px !important;
}
.main-navigation .menu-toggle {
color: orange;
}
}
a.gb-button.google-review:hover {
opacity: 0.5;
}now working, thanks for your help Ying
You are welcome :)
