[Resolved] Change Font Weight on secondary menu and opacity of svg logo on hover

[Justin]

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

[Ying]

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;
}

[Justin]

Thank you for the swift response Ying

The code you gave doesn’t seem to work for the SVG Icon

[Ying]

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.

[Justin]

hi Ying

very strange as I just checked and closing brackets are not missing

[Ying]

Can you copy and paste all your CSS here and wrap it with the CODE tag?

[Justin]

`.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;
}

[Ying]

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;
}

[Justin]

now working, thanks for your help Ying

[Ying]

You are welcome 🙂

[Author]

Posts