Header, Menu, & Footer full width of page

Hello, I cannot find an answer to this. I would like for my header, menu bar, and my footer to be the full width of page, but my content remain the same at 1200px. My website is http://www.honeysucklefootprints.com can this be done? I’ve been using custom CSS to tweak my page with the help of a friend. Currently this is what I have in my Custom CSS dialog box
.wrapper {
max-width: 1200px;
}
.container, #site-title a img
}
article, .widget {
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.site,
.site-header {
max-width: 100%;
}

Also, instead of highlighting the entire box when scrolling over the menu bar, I would like to highlight only the letters, is this possible as well?

Hi @honeysucklefootprints,

I hope you are well today and thank you for your questions.

Hello, I cannot find an answer to this. I would like for my header, menu bar, and my footer to be the full width of page, but my content remain the same at 1200px.

I visited your shared site and it displays full width to the page as shown in the attached screenshot.

Do you want to make it full width to browser window?

Also, instead of highlighting the entire box when scrolling over the menu bar, I would like to highlight only the letters, is this possible as well?

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options

body #main-nav ul li:hover > a,
body #main-nav a:hover{
	background: transparent;
	box-shadow: none;
	color: #f9f9f9;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

Thanks for your reply Movin. Currently my profile is set at 1200px, which is what I want for the content; however I want the menu bar to be full page width to be the same as my “Hello Bar”

I pasted the code above in my custom CSS and it didn’t change anything. I’m assuming it’s due to the codes I already have in the custom CSS box. Is there a way to make this code override the others?

Thank you for your help!

Thanks for your reply Movin. Currently my profile is set at 1200px, which is what I want for the content; however I want the menu bar to be full page width to be the same as my “Hello Bar”

You can try achieving this by using the below CSS code.

div.wrapper {
    max-width: 100%;
}
I pasted the code above in my custom CSS and it didn’t change anything. I’m assuming it’s due to the codes I already have in the custom CSS box. Is there a way to make this code override the others?

I troubleshooted it on your site and found it’s not working because you have added dot . before body tag as following

.body #main-nav ul li:hover > a,
body #main-nav a:hover {
    background: transparent;
    box-shadow: none;
    color: #f9f9f9;
}

Instead you should use the code as following without dot .

body #main-nav ul li:hover > a,
body #main-nav a:hover{
	background: transparent;
	box-shadow: none;
	color: #f9f9f9;
}
You can try achieving this by using the below CSS code. div.wrapper { max-width: 100%; }

Thanks for the information, but I don’t want the content area at 1200, just the yellow menu bar. Is there a way to do this without changing the content area?

Instead you should use the code as following without dot . body #main-nav ul li:hover > a, body #main-nav a:hover{ background: transparent; box-shadow: none; color: #f9f9f9; }

Just changed it and I don’t see anything different. It’s still the same.

Thank you for your help on this, it’s driving me crazy

Thanks for the information, but I don’t want the content area at 1200, just the yellow menu bar. Is there a way to do this without changing the content area?

As you have requested in your initial reply i made header, menu bar, and footer to the full width. I think you want to apply background color #efefef to the content area which you can do by using the following CSS code.

div.wrapper {
    max-width: 100%;
    background: #fff;
}
#main {
    background: #efefef;
}

Just changed it and I don’t see anything different. It’s still the same.

It’s working fine for me on your site now. Please try clearing your browser cache or using different browser.