.dark on , but not-dark for xs and sm

Hi,

is there a way to either remove .dark or add .not-dark to header and menu for xs and sm media queries? I have the following header element

		<header id="header" class="transparent-header <strong>dark</strong>" data-sticky-class="<strong>not-dark</strong>">
			<div id="header-wrap">
				<div class="container clearfix">
					<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
					<div id="logo" class="nobottomborder">
						<a href="/" class="standard-logo"><img src="<?php get_theme_url(); ?>/images/logo100x100.png" alt="GCBB Logo"></a>
						<!--a href="index.html" class="retina-logo" data-dark-logo="images/logo-side-dark@2x.png"><img src="images/logo-side@2x.png" alt="Canvas Logo"></a-->
					</div><!-- #logo end -->
					<nav id="primary-menu" class="<strong>not-dark</strong>">

and would have assumed that, in case of xs and sm, the sticky-class will be applied. But that's not the case. Actually I would like to have the header and the menu to be .not-dark for small devices.

Thanks.

I use full-header menu with "transparent-header" and "dark", and I want the "device-SM/XS" to be "not-dark".

My problem is when I go from device-SM to device-MD size or the other way around.

I tried the solution you provided above, and it works fine if I load the page with "device-SM" size. But if I load the page in "device-MD" size and go down to "device-SM" size, the menu is still dark.

Also if I load in "device-SM" size and enlarge the browser window to "device-MD" the menu is not dark, despite that it has the class "dark". However, if I scroll down and the sticky menu is shown, when I scroll to top again the menu is "dark".

So there seems to be a glitch when moving from one resolution to another.