CODEWITHSUNDEEP
phphtmlcsswordpress
ahinkle
ahinkle

Reputation: 2261

PHP Change CSS Style

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:

enter image description here

Any suggestions here? Thanks!

Edit:

Just tried using a jQuery way with no luck:

<script>
    $( 'menu-item-153' ).css('display', 'none');
</script>

Upvotes: 1

Views: 4568

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 370993

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/

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

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');

Upvotes: 2

ZKA
ZKA

Reputation: 507

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;
}

Upvotes: 1

Related Questions