Logo to be set ontop of the Menu – both centered

Step 1: Center the logo snippet. This is a php solution by @acub.

Step 2:
I had a CSS solution I used but didn’t feel it was completely right. @acub has sent me a hybrid css/php solution which I need time to deploy on my own site. I’ll then turn it into a Snippet.

So try this as a temporary measure:

/* center Header */
.brand.span3 {
float:          none;
margin:         auto !important;
}
.row-fluid .navbar-wrapper {
float:          none;
margin:         0 auto;
width:          90%;
}

@redell, you wrote:

” @acub has sent me a hybrid css/php solution which I need time to deploy on my own site. “

I’d love it if you could share that solution (with a caveat) on this thread soon. I’ve been chasing different ways to fix the centered header/centered menu problem, and I’d be more than willing to test a simpler solution than the one you provided (it seems to drift the center logo right in smaller viewpoints rather than remaining centered). Thanks!

@rdell though I’ll also test this temporary measure today. Thanks again for all your support.

It was my top priority today, but the Forum took over! Should have something to show tomorrow.

@matt84532 the following solution displays logo, tagline and menu, all centered on top of each other. also, social links are removed from header:
CSS (goes inside style.css of child theme):

.brand.span10.offset1 {float: none;}
.tc-header .outside {display: block;  text-align: center;}
.navbar-inner .row-fluid .span7.site-description {display: none;}
.navbar-wrapper .navbar.notresp.row-fluid { float: none; width: 90%; margin: 0 auto; }
.navbar .navbar-inner {padding: 20px 0 0; }
.navbar .nav {float: none; width: 100%; text-align: center;}
.navbar .nav > li {float: none; display: inline-block;}
.navbar .nav > li .dropdown-menu li {float: left; width: 100%; text-align: left;}
@media (max-width: 979px) {
.tc-header .brand {width: auto;}
.row-fluid .offset1:first-child { margin-left: 0; }
}

PHP (goes inside functions.php of your child theme):

// center the logo by switching TBs classes on brand div:
add_filter('tc_logo_title_display', 'custom_center_brand');
function custom_center_brand($output) {
return preg_replace('/brand span3/', 'brand span10 offset1', $output);
}

// prevent the output of tc_social_in_header:
add_filter('tc_social_in_header', 'prevent_social_in_header');
function prevent_social_in_header($output) {
return;
}

// remove span9 from navbar-wrapper:
add_filter('tc_navbar_display', 'remove_span9_navbar_display');
function remove_span9_navbar_display($output) {
return preg_replace('/navbar-wrapper clearfix span9/', 'navbar-wrapper clearfix', $output);
}

@rdell: i appreciate your time and effort into unifying the solutions and posting only the good stuff so users don’t get lost. feel free to use any of my bits in your guides. questions are welcome too ??

@acub Thanks! I’ll let you know how it works.

I do think the placeholder to the social links may have been what was causing it to float right at different resolutions.

I’ll report back — I’m actually going to remove all my hacks and edits from my child theme and rebuild it piece by piece to ensure a cleaner CSS, so I should get a good sense of how this works.

I appreciate your time everyone and thanks for the updates I will give them a go.

Thank you thank you thank you!!!! All worked!

Look out for the Snippet when it is published as it includes a commentary from @acub on how he developed this code. As an Intermediate user, I found it really informative and useful.

@acub and @rdell Thanks so much for this!

One question for @acub. In the email you sent to @rdell you wrote:

“If it was possible, i’d also go for not outputing the tagline inside navbar, but it’s generated by the same function as the one outside, so we’re going to hide this one.”

I would like to not output the tagline at all (as it is contained already in a graphic logo) — how might this be done?

That’s another Snippet!

Thanks!

If you don’t want to output the tagline, filter the output of tc_tagline_display and return nothing:

// prevent output of tc_tagline_display:
add_filter('tc_tagline_display', 'prevent_tagline_display');
function prevent_tagline_display($output) {
return;
}

However, I don’t recommend this method for tagline, as search engines display the tagline right after your site name. So use the hiding technique provided by rdell above, but make sure the tagline is set to whatever words you want displayed by your name in search results.

I have tried this, in css and in php, but it is not working. Any help would be greatly appreciated.

thinkingelvish.com

Thinking Elvish , what are you trying to achieve?