Hide sub-menu dropdown arrow on menu item that is hidden when logged out

[Julian]

Julian

August 14, 2019 at 10:30 am

Hi guys

Ascend is working really well for me but I’ve hit an issue with menu items that my limited css skills can’t solve.

I’m adding a menu item for our users that changes depending on whether they are logged in or not.
When logged in, the user sees a welcome menu item with a dropdown sub-menu with three options. When logged out, the user sees a single menu item linking to a login page (with no dropdown).

Searching this forum I’ve been able to hide the actual menu items by adding classes to the menu items and using the following css:

/* Show/hide menu items
Patrons & Friends Login page link (class: ou-patrons-loggedout)
Welcome username and sub-menu (class: ou-patrons-loggedin) */
.ou-patrons-loggedin {
display: none;
}
.logged-in .ou-patrons-loggedin {
display: inline-block;
}
.ou-patrons-loggedout {
display: inline-block;
}
.logged-in .ou-patrons-loggedout {
display: none;
}

When logged out, the .ou-patrons-loggedin menu item and its dropdown menu items (also with class .ou-patrons-loggedin) are all hidden as expected and replaced by the .ou-patrons-loggedout menu item.

However the little arrow to the right from the .ou-patrons-loggedin menu item is still displayed. It comes from the a::after child element from the top-level <li> item with class .ou-patrons-loggedin. I’ve been tearing my hair out trying to write the css to select it to change the css display property to none for it when logged out.

Hope the logic isn’t too confusing! Can you help please?

Cheers and thanks!

Julian