Public Forums 71,145 posts

[r082 Friend r082Join date: May 2013Posts: 1Downloads:0Uploads:0 Thanks: 2]

#187883

I have a question about working with the t3_blank template. The main body of the page is responsive and seems to stop at a certain point. BUT the header part seems to stretch %100. I would like the header to mimic the way the rest of the page resizes. Any suggestions?

Does this make sense? I can draw a simple illustration if needed.

– Rob

[pepperstreet Friend pepperstreetJoin date: April 2011Posts: 55Downloads:223Uploads:7 Thanks: 21 Thanked: 4 times in 1 posts]

#494434

AFAIK, the header has the same container class as the body. So, they both have a fixed max width. (1196px by default in bootstrap responsive CSS file). So, I assume you are talking about the 100% navigation bar background?!

The navigation default style is set in your TEMPLATE.CSS file. around line# 1204
Look for the class .t3-mainnav
Those are the default background styles…

now look at line# 1216
There is the inner element class .t3-mainnav .navbar
This element and class is inside another container… so it will get the same fixed max width.
Simply cut & paste all CSS properties to the latter…

Original CSS lines:

.t3-mainnav {
background-color: #f5f5f5
background-image: -moz-linear-gradient(top,#ffffff,#e6e6e6)
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#ffffff,#e6e6e6)
background-image: -o-linear-gradient(top,#ffffff,#e6e6e6)
background-image: linear-gradient(to bottom,#ffffff,#e6e6e6)
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
border-top: 1px solid #e6e6e6
border-bottom: 1px solid #cccccc
}

.t3-mainnav .navbar {
color: #666
margin-bottom: 0;
margin-top: 0;
}

Modified Version:

.t3-mainnav {
}

.t3-mainnav .navbar {
color: #666
margin-bottom: 0;
margin-top: 0;

background-color: #f5f5f5
background-image: -moz-linear-gradient(top,#ffffff,#e6e6e6)
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#ffffff,#e6e6e6)
background-image: -o-linear-gradient(top,#ffffff,#e6e6e6)
background-image: linear-gradient(to bottom,#ffffff,#e6e6e6)
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
border-top: 1px solid #e6e6e6
border-bottom: 1px solid #cccccc
}

Hope that helps.

2 users say Thank You to pepperstreet for this useful post

1. JA Developer
2. r082

[Author]

Posts