PHP Change CSS Style

Question

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>

That's a CSS specificity issue. You can use #menu-item-153 { display: none!important; } or #top-menu li#menu-item-153 { display: none; } — Michael Coker
– Michael Coker, Commented Jan 30, 2017 at 1:44
@BaraaAl-Tabbaa So the HTML is loaded from MySQL so thats a nogo... yeah... weird developers created the site. — ahinkle
– ahinkle, Commented Jan 30, 2017 at 1:47

Michael Coker · Accepted Answer · 2017-01-30 01:46:22Z

2

It's a CSS specificity issue. You can use

#top-menu li#menu-item-153 {
  display: none;
}

or

#menu-item-153 {
  display: none!important;
}

Or if you want to do it with jQuery, you left off the # ID part of the selector

$('#menu-item-153').css('display', 'none');

answered Jan 30, 2017 at 1:46

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Coker Over a year ago

@hinteractive02 fo sho!

ZKA · Accepted Answer · 2017-01-30 01:46:14Z

1

Your PHP-part is functioning just as it should.

Your problem is that your "display:none;" is being overriden by another piece of styling:

#top-menu li {
display:inline-block;
}

Make YOUR CSS selector more specifik to override this: Use this:

#top-menu #menu-item-153 {
display:none;
}

answered Jan 30, 2017 at 1:46

ZKA

5153 silver badges13 bronze badges

Comments

Michael Benjamin · Accepted Answer · 2017-01-30 02:03:53Z

1

You have a rule with specificity of 101 points.

#top-menu /* id selector = 100 specificity points */

li        /* element selector = 1 specificity point */

The above rule is overriding another rule with a specificity of 100:

#menu-item-153 /* 100 specificity points */

You could use !important to quash the first rule and get it over with.

However, often times it's good to reserve !important for when it's absolutely necessary.

In this case, you just need 2 points for the preferred rule to prevail. This should do it:

li#menu-item-153.menu-item /* class selector = 10 specificity points (111 total) */

or

#top-menu > #menu-item-153 /* 200 specificity points */

More info: http://cssspecificity.com/

answered Jan 30, 2017 at 2:03

Michael Benjamin

375k110 gold badges616 silver badges737 bronze badges

Collectives™ on Stack Overflow

PHP Change CSS Style

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related