Target opacity for mobile header

Theme: twenty fifteen-child. Headers (left sidebar) work great on laptops and desktops. With CSS was able to set the perfect header opacity so my branding logo png dominates the stage. But…I can’t figure out how to control the opacity of the header (across the top) on the small screens. With CSS, anyone know how can I specifically target the header opacity for mobile devices so my branding logo shows up as well on small screens as it does on desktops, etc. Since the mobile header is apparently a separate element anyone know how to format it for my purpose? Thanks.

body:before {
    opacity: 0.3;
}

Works for the big screen.

SeattleSmarty.com