Secondary menu on smaller mobile devices

Hi, I put in some CSS to add secondary menu at the top of smaller mobile devices however, after applying CSS there was a lot of extra padding in the secondary menu therefore pushing the logo to cover the texts in revolution slider. I want the texts in the top menu for mobile devices to stay on only 2 lines…The operating hours should be on a line on it’s own on top then the phone number, address and login should be on a second line below operating hours and the space between both lines should be reduced as well so as to cut off some extra padding that may arise. Also the texts sizes should be reduced so as to achieve this perfectly. Also when you click on login the X button to close the login form is invisible making it impossible to close. Please have a look at my website from a mobile device https://www.nirraky.com many thanks

CSS added:

@media (max-width: 767px){
.header_top_bar {
display: block;
}
}