July 3, 2021 at 5:53 pm #1308587
Mike

Hi,
Instead of using page IDs you could add a class to all of your “black” styled pages and change the script to look for #top.black instead of #top.page-id-33 To add this class to some of your pages you could use the WordPress Custom Fields option, the Custom Fields options on the Post & Page edit screens are hidden by default if they have not been used before. Using the Block Editor, click the three dots button at the top of the right sidebar and visit Options to enable it. (If you are using the Classic editor, check the screen options).
So in this case we will add the Name: bodyclass and the Value: black
custom_fields_name_value.jpg
to each one of these pages, then add this code to the end of your functions.php file in Appearance > Editor:

function add_custom_fields_bodyclass( $classes ) {
    global $post;
    $bclass = get_post_meta( $post->ID, 'bodyclass', true );
    if ( empty( $bclass ) ) {
        return $classes;
    }
    $classes[] = $bclass;
    return $classes;
}
add_filter( 'body_class', 'add_custom_fields_bodyclass' );

Please note that this only looks for the Name: bodyclass but it will add any value as a body class.
As for question #2 I’m not seeing the full-width sub-menu on your home page, which page are you testing on? Which animated gif are you referring to?

Best regards,
Mike