Answer:

By default, there is too much stuff in the top bar to fit properly on a small screen without pushing your logo and menu bar too far down the screen.  If you wish for the search and social icons to be visible at least, you can enable the top bar and then selectively hide the other elements with custom css (your email and phone links are not as useful on mobile views – make sure this info is also on your Contact page).

 

 

@media only screen and (max-width: 768px){
 
#header-contact-container{display: block;}
 
.header-cart-button, .header-contact{display: none;}
 
#menu-drop-button{top: 70px;}
 
}

 

Depending on how many links are in your top menu and how many social icons you have, both may not fit. To hide an element, we give it a display: none style.

Display the search and social links only:

@media only screen and (max-width: 768px){
 
#header-contact-container{display: block;}
 
.header-cart-button, .header-contact{display: none;}
 
#top-navigation-container{display: none;}
 
#menu-drop-button{top: 70px;}
 
}

Display the search and top navigation only

@media only screen and (max-width: 768px){
 
#header-contact-container{display: block;}
 
.header-cart-button, .header-contact{display: none;}
 
.header-social{display: none;}
 
#menu-drop-button{top: 70px;}
 
}

mobile-contactbar