I have a nav nestable menu that contains text links and dropdowns. Each of my dropdowns has an internal page link. I am using ACSS and this is controlling link styling.
I need to change the ACSS link styling for the entire menu. I have set the font colour and set text decoration to none everywhere and only the following change:
text links
dropdowns that do not have a page link
When the dropdown has a page link, any typography styling is not applied to the a tag, it is applied to the parent div (class brx-submenu-toggle) and so ACSS continues to style the label.
Here is a screenshot of the menu where one dropdown on the right does not have a page link. You can see that text links are styled in white with no underline but dropdowns with page links are styled by ACSS:
ACSS sets link styling with this css:
body a {
color: var(–action);
font-weight: 500;
-webkit-text-decoration: underline;
text-decoration: underline;
text-underline-offset: 0.3em;
}
When you add a page link to a dropdown, Bricks sets typography changes not on the a tag which would override the above but instead it sets it on the div parent.
I have temporarily removed the custom css that fixes this issue so ACSS is still styling links on Home – Otter Vale Churches. I have added a dropdown with no page link before the button. I have then set on the nav nestable element all the top level items to have a colour of var(–primary-ultra-light) and to disable text decoration.
As you will see, all text links have obeyed this as has the dropdown with no page link. All those in purple with an underline are dropdowns with page links. If you inspect one you will see that the typography change is set at the div level and not on the a tag and the a tag has the ACSS style.
I can’t keep the menu this way for long as I need to get on with its development.
