Have you tried
.brand.span3 {
width: 100%;
}
?
You might also want to take a look at this to understand the principle, if you don’t want it full width: http://www.themesandco.com/snippet/center-logo/
Just tried it—it helped, but now I’ve got a gap between the slider and logo. I’ve changed the logo color so you can see the border. Any idea how to make the gap smaller? I’d also like to extend the logo area so the sides match up with the sides of the slider, but I’m not sure how to do that. Sorry if these are dumb questions, but I’m new to CSS and this theme.
http://blogs.luc.edu/urbanature/
There’s a missing menu in that gap. If you don’t want to use a menu for your website, just add
.navbar-wrapper { display: none; }
to your CSS.
If you want the logo div to be glued to the slider, add this line to the one above:
.tc-header .brand a { margin-bottom: 0; }
If you want the header image to match the slider width, you need to add:
a.site-logo img {
padding: 20px;
background-color: #3a7f3e;
overflow: hidden;
}
@media (min-width: 768px) and (max-width: 979px) {
a.site-logo img {
width: 684px;
}
}
@media (max-width: 767px) {
a.site-logo img {
width: 95%;
}
a.site-logo {
background-color: #3a7f3e;
overflow: hidden;
}
}
That’s pretty much it.
However, I do not recommend adding your slogan/tagline as a picture. If you leave it as text search engines will show it next to any search result that matches content on your website.
Thanks so much for the help—I think I’ve got it looking as good as it get. And thanks for that tip on search results.
