Descrease mobile breakpoint for header

Site URL: https://www.yumartialarts.com/

I would like to have the mobile header show up only on phones on this site https://www.yumartialarts.com/.  The desktop header looks better on tablets.  I have tried changing the max-width to 640px in the CSS but it only halfway works.  There is a weird space between 640 and 799 and I can't seem to find all of the pieces.  

If I go to the CSS for the site and look, I can see all of these different options for mobile.  If I start to change them I get this like the logo on left, two logos, no logo or menu between 640 or 799.  It is like there are two many things.  I thought setting the breakpoint for .header-display-desktop and .header-display-mobile would override the other items in those divs.  Has anyone had any luck with this?  How did you do it?

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){.header-display-mobile{display:flex}}.header-display-mobile .showOnDesktop{display:flex}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){.header-display-mobile .showOnDesktop{display:none}}.header-display-desktop{position:relative;display:flex;width:100%;box-sizing:border-box;justify-content:flex-start;align-items:center}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){.header-display-desktop{display:none}}.header-display-desktop .showOnMobile{display:none}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){.header-display-desktop .showOnMobile{display:flex}}.header-title-nav-wrapper{display:flex;flex-wrap:nowrap;flex:1 0 67%;align-items:center}.header-title{flex-grow:0;flex-shrink:0;backface-visibility:hidden}

Don't quite understand the request.

You want on mobile

• remove mobile logo, burger
• appear desktop header (logo on top, normal navigation bottom, right is button, left is fb icon)?