Replace Logo with Header spanning Container and Expand Menu to Container Size

I have searched in here and found code to replace the logo with a header that runs the full span of the site - but I want it only to be the size of the container and the menu expanded to be the same size as the container as well. Because it seems the header and menu expand based on browser - cant find size? I would need the code to do that?

I attached a picture so you can see what I want it to look like.

Here's my site - http://www.bestbabymonitorchoice.com


I'm using Lifestyle Pro Theme.

 

Hello,
Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.menu_wrapper {
  margin: 0 !important;
}

Thanks,
Praveen

 

Worked for the menu but I still need to have my header fixed. Started another thread.

 

Hello,

In earlier provided screenshot, your header contains only some heading texts but currently your website headers contains different items.
So, please help me in understanding your requirement so that I can assist you accordingly.

Thanks,
Praveen

 

I want to do a full size header to show in place of the logo 1068 x 178 that will fill the container with it to also be able to show the banner or not show the banner and to make the header I do Mobile Responsive how do I do that?

 

Right now I removed the logo and banner ad and made a background graphic but I don't really want to do that. Id like it to look like the mock site with the logo larger (1068 x 168) or thereabouts not as a background image but with a little less padding under header image and a bit of padding at top but here's what it looks like with the code I found and used.

Help would be appreciated.

Here's the code I am using

.logo {
display: none;
}
.header {
padding-top: 172px !important;
background-size: contain !important;
}
.header .header_info {
display: none !important;
}
@media only screen and (max-width: 767px) and (min-width: 480px){
.header {
padding-top: 65px !important;
}
}
@media only screen and (max-width: 480px){
.header {
padding-top: 40px !important;
}
}
@media only screen and (max-width: 960px) and (min-width: 767px){
.header {
padding-top: 102px !important;
}
}
@media only screen and (max-width: 140px) and (min-width: 961px){
.header {
padding-top: 134px !important;
}
}
.header {
background: url('http://www.bestbabymonitorchoice.com/wp-content/uploads/2015/04/5Best-Baby-Monitors.png') top center no-repeat;
}
.menu_wrapper {
margin: 0 !important;
}
#menu .ddsmoothmenu {
background: blue;

 

Hello,

I have provided the solution in your another thread link.
http://inkthemes.com/community/threads/remove-banner-and-make-header-responsive-in-rethink.17125/

Thanks,
Praveen

 

Yes I saw the other link - still not what I want - maybe I need to start over. I will put this in the other thread as Im not sure how to get this done. It has taken me 3 days already.