How to hide header icon based upon logged in/out?

Support
#1

Hi. I have a dropdown menu in my pro header presented with an image - screenshot attached. I have my menu set to show items for logged out (hows login and register). I was hoping then that the header menu would not be visible to logged in users but s you can see the image remains. Is there css I can apply to hide the image/element based upon users being logged in?

thank you

#2

Hi There @dsthompson ,

Thanks for writing in! This isn’t a feature offered by X theme and it would be outside the scope of the support as it will require custom development. However, try utilizing a plugin for your specific requirement and see if that helps.

For example, you can try following this guide (https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/).

Please also note that we do not provide support for 3rd party plugins as well. If you encounter any issues related to that plugin, you need to contact the plugin author directly.

Thanks!

#3

Thanks for the reply. I am already applying menu logic which works well. My issues is that the graphic for the menu as applied in the header show regardless of the menu logic and I was hoping for a way (css) to hide the graphic when users are logged in but not sure three is a css trick to accomplish this.

Thanks for you help with this.

#4

Hi @dsthompson

You can just add a custom class to this anchor:

Then, make use of the body class logged-in to hide this anchor for logged in users, like this:

.logged-in .custom_class {
    display: none;
}

this should do the trick,
Thanks.

#5

Hi Alaa, this sounds perfect but I am still not able to hide graphic and pretty sure I haven’t applied correctly. Here how I have applied - screen shot and below

in class section - .logged-in .hide_graphic in element css section “$el” .logged-in .hide_graphic { display: none; }

Thanks so much for helping with this

#6

Hi,

You can add only hide_graphic in the class field, then add this in Header > CSS

.logged-in .hide_graphic {
    display: none;
}

Hope that helps.

#7

Thanks for that clarification. I have made those changes but the graphic still appears when logged in.
I also included the !important in the css, but must still be missing something?

#8

Hey @dsthompson,

You’ve added the what’s supposed to go in the Element CSS in your Pages Header’s Header CSS.

I removed "$el" in that code and it now works. Now you need to apply the same for your Home Header.

And by the way, it would best that you post your login credentials next time so we don’t have to check your other threads for it thus saving us some time and thereby will help with reducing our response time.

Hope that helps.

#9

Thanks so much. I understand now. Sorry about the credentials and will provide next time.

#10

You’re welcome!
We’re glad we were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.