Banner & Menu Width

This topic has 3 replies, 2 voices, and was last updated 10 years, 7 months ago by Sakin.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 25, 2013 at 1:38 pm #16365

James
Member

Hi

I want to make the banner and the menu the same width as the content boxes below it.

Is there any way of doing this with configuration, or does anyone know where within the CSS code I need to update to make them narrower.

I thought disabling responsive might do this, but it did not.

The website is: http://www.watfordfencingclub.co.uk

Suggestions welcomed.

Thanks

James

October 26, 2013 at 12:02 am #16383
Sakin
Keymaster
@James: You can try adding in the following CSS in “Appearance => Theme Options => Custom CSS” box.
```
#header-image,
#header-menu {
	margin: 0 auto;
	width: 1190px;
}

@media screen and (max-width: 1224px) {
	#header-image,
	#header-menu {
		width: 1024px;
	}
}
@media screen and (max-width: 1060px) {		
	#header-image,
	#header-menu {
		width: 900px;
	}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#header-image,
	#header-menu {
		width: 960px;
	}
}
@media screen and (max-width: 960px) {	
	#header-image,
	#header-menu {
		width: 700px;
	}
}
@media screen and (max-width: 767px) {
	#header-image,
	#header-menu {
		width: 380px;
	}	
}
@media only screen 
and (min-width: 480px) 
and (max-width: 767px) {
	#header-image,
	#header-menu {
		width: 440px;
	}
}
@media screen and (max-width: 479px) {
	#header-image,
	#header-menu {
		width: 300px;
	}	
}
@media screen and (max-width: 320px) {
	#header-image,
	#header-menu {
		width: 95%;
	}	
}
```
April 17, 2014 at 8:38 pm #26063

James
Member

I have just upgraded to v2 of the theme, however the CSS code above does not seem to be working any more.

Any suggestions to make it work again, so that the header image matches the same width as the menu?

April 17, 2014 at 10:18 pm #26075

Sakin
Keymaster

@James: I see that your site header images matched the same width as the menu. You don’t need to disable responsive design. As the CSS above is for responsive design only.
Author

Posts