Topic on Skin talk:Chameleon

Hi Stephan,

I would like to have a full width colored header. The content of the header (logo, menu, search) should not be placed on the left (like in clean.xml for example) but within the grid area. Like this for example: http://awesomescreenshot.com/0eb5zawi12

I tried to put another <grid> in the NavbarHorizontal like this, but it didn't work:

<component type="NavbarHorizontal" >
<grid>
	<row>
		<cell span="12">
			HeaderCode...
		</cell>
	</row>
</grid>
</component>

<grid>
	ContentCode
</grid>

Can you point me into the right direction please?

I'd say leave the layout file as it is and add some less code to your external less file (add it if you don't have it yet):

@media (min-width: @grid-float-breakpoint) {
	.layout-fixedhead .navbar .container-fluid {
		width: @container-lg - 2 * @grid-gutter-width;
		padding: 0 2em;
	}
}

If you use something else than the fixedhead layout, you will have to modify the example above accordingly.

Thanks for the very helpful advice! It works like a charm :)

I replaced width with max-width for better mobile design and ended up using this code:

@media (min-width: @grid-float-breakpoint) {
	.layout-MyLayoutName .navbar .container-fluid {
		max-width: @container-lg;
	}
}