Center the logo 23


Add this in your child theme’s functions.php:


About Andrei

I'm the designer who's been told by coders "It can't be done". So I taught myself coding and did it. Learned CSS, PHP in the process and fell in love with WordPress. Meeting Customizr really meant a lot. Not only have I found an awesome theme, but it also made me want to start giving back, in return for all the times I've been helped myself.


23 thoughts on “Center the logo

  • Reply
    Dave Bardell

    As our resident php expert, how do you decide whether to do this kind of change in php or css?

    Appreciate your contributions to the Forum, helping me start to understand php much better, despite reading books/tutorials!

    • Reply
      Andrei Post author

      We are basically doing the same thing: making sure the logo container spreads to full page width. I find my solution, in principle, a little less aggressive, as instead of applying a CSS rule that overrides the normal behavior of the assigned Bootstrap class, it changes that class on the fly with a wide one and lets Bootstrap work as intended. Theoretically, on a very large scale, my method produces lighter code, with less CSS overrides, which speeds up the rendering/browsing process, but it outputs the code slower, as it has a preg_replace to run. In the end, I really can’t figure out which one would be faster by a second or two over a couple of centuries.

    • Reply
      Andrei Post author

      Posted a solution for this here. Centers logo, tagline and menu. Also, the menu items do not float left or right, they float centered. If they fill up a row, they start floating centered on second row and so on…

  • Reply
    David

    It worked great. There tends to be a large amount of blank space at the bottom of the logo before the next section picks up. Any good way to reduce the empty space?

    • Reply
      Andrei Post author

      David, the condition above checks if the function “theme_special_nav” exists. If it doesn’t exist, it declares it and “//do(es) something”. If it already exists, it doesn’t do anything. In the snippet above I haven’t declared any “theme_special_nav” function. I’m only declaring the “your_logo_display” function, which, in turn, could be renamed to “any_function_name_you_want_and_does_not_already_exist”. Just make sure you use the same exact name in add_filter() above it.

  • Reply
    Mike

    Hi Andrei/Everyone,
    Just looking for a little advice here. I have no issues with anything else other than centring my logo and have tried a variety of codes, posted here and elsewhere without success. Is there something I’m missing?
    Thanks
    Mike

    • Reply
      Andrei Post author

      Sorry to reply as late as this, haven’t noticed your comment before. If the solution above doesn’t work for you I suggest opening a thread on the WP theme’s forum, providing a link to your website so I can check why it’s not working. It’s also important that you specify what version of the theme you have and any other snippets you might be using. Hopefully we’ll get to the bottom of this.

  • Reply
    Rob Irizarry

    I’m using the following in the child theme functions.php but can’t get the logo to center over the menu. It simply doesn’t move:

    What am I missing?

    • Reply
      Andrei Post author

      As of 3.0.14 the hook for logo changed from “tc_logo_title_display” to “tc_logo_img_display” if you have a logo and “tc_logo_text_display” if it uses the site title (you don’t have a logo).

      I just updated the snippet to work for 3.0.14. Thank for pointing this out.

  • Reply
    Omer Baturay

    I loaded up the code into Functions.php exactly in my child theme but it appears as text on my website. I’m thinking this is because the only code I have on there is the code posted above which isn’t being “read” correctly.

    Can someone please post the entire code just so I can sample it?

    Thanks

  • Reply
    Mads

    Can I adjust the size of the logo? Ex. make my logo larger og reduce the width of the menu-bar? If yes, where and how?

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">