Crio theme custom sticky header disappears on mobile

Hi there,
I’m using a custom sticky header (on the Crio theme) that works fine on desktop sizes, but it doesn’t appear on mobile screens. When I’m in the Customizer and I switch from desktop to mobile preview, for a second I actually see the sticky header transform into a hamburger menu for mobile, but then it zooms up offscreen so it’s not visible anymore. It seems to display fine in the Crio custom header templates editor without zooming away.

Any tips on how to keep it nice and sticky like it should be?

(Bonus question: Is there a way to change the color of the hamburger menu on this header, or does it just default to the 1st color in my color palette?)

Thanks!

Here’s the html behind my custom header:
<div class=”boldgrid-section” style=”padding: 0em; margin: -10px 0px 0px;”>
<div class=”container-fluid”>
<div class=”row” style=”margin-top: 0px; padding: 0em; margin-bottom: 0px;”>
<div class=”col-md-12 col-xs-12 col-sm-12 color3-background-color color-3-text-contrast bg-background-color align-column-center” style=”box-shadow: rgba(0, 0, 0, 0.81) 0px 0px 3px 2px; padding: 0px 0px 2px;”>
<div class=”boldgrid-component-menu boldgrid-shortcode standard-menu-enabled header-top bg-font-family-heading color4-color” data-imhwpb-draggable=”true” style=”margin: 0px; padding: 0em;”>

[boldgrid_component type=”wp_boldgrid_component_menu” opts=”%7B%22widget-boldgrid_component_menu%5B%5D%5Bbgc_menu_location%5D%22%3A%22Sticky%20Header%20location%22%2C%22widget-boldgrid_component_menu%5B%5D%5Bbgc_menu_location_id%5D%22%3A%22sticky-header-location_345%22%2C%22widget-boldgrid_component_menu%5B%5D%5Bbgc_menu%5D%22%3A%2218%22%2C%22widget-boldgrid_component_menu%5B%5D%5Bbgc_menu_align%5D%22%3A%22center%22%7D”]

</div>
</div>
</div>
</div>
</div>