Center Logo and Main Navigation (Karma theme)

Posted in: ,
Please note: As of Karma 4.0 WordPress Theme this option has been added directly to the Site Options Panel located under the Logo Section.
(Appearance > Site Options > Logo)

Simply ignore this tutorial and center the logo very simply using Karma’s new point-and-lick logo alignment options. For older version of Karma or Karma-HTML: This customization is not recommended when using the jQuery (2) Slider. Formatting issues will occur.


This article describes how to center the logo and main navigation within your Karma WordPress theme. This is great for any websites which have a large logo.

General Instructions:

  1. Log into your WordPress Dashboard
  2. Access the Site Options Panel by clicking on ‘Appearance > Site Options’
  3. Click on the ‘Styling Options’ tab
  4. Scroll down and add the CSS code below into the ‘Custom CSS’ section
  5. Save changes and rejoice! :)
#header .logo, #header .custom-logo {float:none;margin:0;}
#header .logo img, #header .custom-logo {display:block;margin:-10px auto 10px;}
#header .custom-logo {text-align:center;margin-bottom:20px;}

#menu-main-nav {margin-right:160px !important; margin-bottom:-20px !important}

Important: The above values are provided as an example. Use this code as a staring point and adjust to your specific needs.

(click screenshot for full-size view)