Widening Header Image/Navigation Bar

I wanted to see if I can widen the navigation bar and header image so it extends to the full width of the inside box. (Attaching an image, with lines showing where I want it to extend to). Also, once this is completed (if possible), can I change the color of the header portion to white or another color, just to break up the blue on the website?

 

Hello,

Greetings from InkThemes!

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

Code:

.header .menu-bar {
    width: 100%;
    margin-left: 0px;
}
.sl-slider-wrapper {
    width: 100%;
    margin-left: 0 !important;
    height: auto; 
}
.bg-img img {
width: 100%;
}

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

This worked perfect! Can I change the background color in just the header area? If so, what is the code for that? Also, I paid to have a header widget put on the site...if I wanted to insert a banner, what size would be recommended? I'd want it to take up the whole header area...the logo and the donate button would be inside of the banner, so I wouldn't need extra space for that.

 

Hi,

Greetings from InkThemes,

To change the background color of the header, you can use the custom CSS code given below :-

.header {
background: #CAC099;
}
Could you please provide us URL of your website along with some edited screenshot of your requirements, so that we can guide you accordingly?
We would be glad to assist you.
Thanks & Regards!
Nitin
InkThemes.com

 

theme1.1stopnonprofitshop.com is the website. I tried changing the color of the header with the code, and it worked, but it still shows a little blue on the sides. I'm attaching a screenshot. Also, if I want a banner image to take up the whole space above the navigation bar, what would be the recommended size. I have a header widget that I can place the image in, just need to know the size. Again, I'm attaching a screenshot of what I want.

 

Hello,

For the first issue, code is given below..

Code:

.header {
    width: 100% !important;
    margin-left: 0;
}

Regarding the second issue, code is as follow..

Code:

.textwidget img {
    width: 70%;
}

Change the numeric value as per the requirement.

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

The first part worked! Thanks! As far as the second part, what does that code do exactly?

 

Second code was just to increase the width of your banner image...