I'm trying to hide a login button if the user is logged in. Due to the clients Wordpress setup, I'm not able to directly edit the button HTML.
Button HTML (unable to edit):
<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item object-custom current-menu-item current_page_item menu-item-home menu-item-153">
<a href="#">
<span id="SignUp" class="et_pb_more_button et_pb_button">
<p>SIGN UP</p>
</span>
</a>
</li>
My thoughts was to write a simple PHP if statement to change the CSS within the header.
<?php
if ( is_user_logged_in() ) {
?>
<style type="text/css">
#menu-item-153 {
display: none;
}
</style>
<?php } ?>
However, the PHP echo outputs on the page but it doesn't change the CSS.
On inspection, it looks like the following:
Any suggestions here? Thanks!
Edit:
Just tried using a jQuery way with no luck:
<script>
$( 'menu-item-153' ).css('display', 'none');
</script>