Why is my jQuery .css() code not applying styles?

Question

I looked about multiple existing posts and none had a solution for me.

Edit: Someone asked why I'm using jQuery(document).ready(function($). This is a Wordpress site. You have to wrap your jQuery like this if you want to use $ since $ is used by the Wordpress framework and will break your code.

Update

Here is the code that creates the button dynamically. I wouldn't have done it this way, but I've inherited the site when I started working here:

$('nav').before('<button class="menu-btn" role="button" aria-pressed="false"><span>toggle menu</span></button>'); 
        $('nav .sub-menu').before('<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>');

Not only are the styles not being applied, they are not even visible in dev tools so I know they're not simply being overridden by inline styles or something. The jQuery css isn't being loaded at all.

Details:

There are no errors in the console log.
No errors when ran through JS Hint
Chrome debugger shows the code executed
Chrome Elements tab does not show the styles as loaded
.site-title's styles are applied perfectly
.menu-btn is not applying at all.

jQuery(document).ready(function($) {

  $('.site-title').css({
    'grid-column-start': '2',
    'grid-column-end': '6'
  });

  $('.menu-btn').css({
    'top': 'unset',
    'right': 'unset',
    'left': '10px',
    'bottom': '15px',
    'z-index': '100',
    'position': 'fixed'
  });
});

When the same styles are added via CSS they apply correctly.

body > div.site-container > button.menu-btn {
  top: unset;
  right: unset;
  bottom: 15px;
  left: 10px;
  z-index: 100;
  position: fixed;
}

@Johannes This is for a Wordpress site. $ is used by the Wordpress framework so you have wrap your jQuery in that if you want to use $. — jarrodwhitley
– jarrodwhitley, Commented Nov 7, 2018 at 16:48
Works for me - jsfiddle.net/8dkqhum2 - Are you 100% sure your script is reaching that point? — MDrX
– MDrX, Commented Nov 7, 2018 at 16:48
@Johannes it's actually good practice to do that, and should not be removed. That argument is jQuery and allows you to reference a local copy. This is useful where there's are conflicting libraries fighting for $, or you released jQuery's control of that variable using $.noConflict(). Here's a more obvious example: jsfiddle.net/qocmy91x — Rory McCrossan
– Rory McCrossan, Commented Nov 7, 2018 at 17:08
Is the button being created dynamically? If so, you'll need to make use of .on() - api.jquery.com/on — MDrX
– MDrX, Commented Nov 7, 2018 at 17:09

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

@MDrX figured it out. My .menu-btn was being created dynamically so added my code to the same block that created the button and it worked!

Final result:

    // Add Mobile Menu Button
    $('nav').before('<button class=".menu-btn" role="button" aria-pressed="false"><span>toggle menu</span></button>'); // Add toggles to menus
    $('nav .sub-menu').before('<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>');
    $('.menu-btn').css ({
        'top':'unset',
        'right':'unset',
        'left':'10px',
        'bottom':'15px',
        'z-index':'100',
        'position':'fixed'
    });

I'm posting the answer here for now, but I'm waiting to see if @MDrX will post an answer so that I can give him the credit and that sweet, sweet rep :)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 7, 2018 at 17:57

jarrodwhitley

82812 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Why is my jQuery .css() code not applying styles?

Update

Details:

1 Answer 1

Final result:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

Details:

1 Answer 1

Final result:

Comments

Your Answer

Sign up or log in

Post as a guest

Related