Acknowledgments to Elegant Themes. I didn’t come up with this. I am just storing it here for easy future reference. Add the following CSS to the Custom CSS in Theme Options.
@media (max-width: 980px) { /********************************* style mobile fixed header *********************************/ .et_fixed_nav #main-header.et-fixed-header { position: fixed; background: rgba(255,255,255,0.8); height: 55px; } .et-fixed-header .logo_container { height: 55px; } .et-fixed-header .mobile_menu_bar { padding-bottom: 5px; } /********************************* make mobile fixed header navigation icon larger *********************************/ .et-fixed-header .mobile_menu_bar:before { font-size: 45px; } .et_header_style_left .et-fixed-header #et-top-navigation { padding-top: 5px; } .et_fixed_nav #et-top-navigation { -webkit-transition: none; -moz-transition: none; transition: none; } /************************** Increase height of logo area on mobile and mobile fixed header ***************************/ #logo, .et-fixed-header #logo { max-height: 80%; } }