Changes to header layout

Hi Guys,

1. I would like to remove the ------- line above the logo
2. My logo i want it to be position in the top left corner (and the social icons to be moved below the logo
3. on the same line as the menu I want the social icons

all in all I have included 4 screen shots showing how i need things moved and how it should look at the end if possible
I have tried many different options and tried to amalgamate various solutions from these boards unfortunately I cant get them to gel together without throwing out one of the other (mobile) layouts
Can you help please

 

Hello,

For this download "header.php" attached and replace it with existing header file. and also Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.social-links {
border-bottom:none;
}
.header {
padding-bottom: 0px;
margin-bottom: 0px;
}
.searchform{
margin-bottom: 0px;
}
 
@media only screen and (max-width: 767px){
.social-links {
padding-top: 10px;
padding-bottom:10px;
}
.social_logos {
margin-bottom: 10px;
}}

Thanks & Regards
Nitesh Raghuwanshi