Moving Header Block items (3.3)

Last Reviewed: 12-May-15 (3.3.23) 3.3.*

If you need to move Header Block Items, 3.3.* release created more options for doing this in the Customize>Header panel. This Snippet has been rewritten due to the amount of change.

The Header Block items consist of:

Site Title / Logo
Navbar Box, containing:
- Social Icons
- Tagline
- Navbar (Menu)

These items can be moved to different positions, generally:

Left-justified
Centered
Right-justified
User positioned

The introduction of a Sticky Header also raised the need to move items for both Non-Sticky/Sticky items. Let’s deal with this first.

There are 2 classes that allow you to be specific on which items you want to target:

.sticky-disabled
.sticky-enabled

1 2	.sticky-disabled .sticky-enabled

By adding either of these to the generic selector will limit code to that state. For example,

.sticky-disabled .tc-header .brand a /* Non-sticky Logo */
.sticky-enabled .tc-header .brand a  /* Sticky Logo */
.tc-header .brand a  /* Both Non-sticky/Sticky Logo */

.sticky-disabled .tc-header .brand a /* Non-sticky Logo */

.sticky-enabled .tc-header .brand a /* Sticky Logo */

.tc-header .brand a /* Both Non-sticky/Sticky Logo */

The Sticky Header Settings can be found in Customize>Header>Design And Layout>STICKY HEADER SETTINGS

The rest of the snippet will ignore this difference.

The alignment of items is managed by the use of Bootstrap 2 spans. For more information, see this Snippet

Site Title / Logo (span3)

The option to left-center-right justify can be found in Customize>Header>Design And Layout>HEADER DESIGN AND LAYOUT>Layout

To hide the Site Title / Logo requires the following CSS:

/* Hide Site Title / Logo */
.tc-header .brand .site-logo img, .tc-header .brand .site-title {
    display: none;
}

/* Hide Site Title / Logo */

.tc-header .brand .site-logo img, .tc-header .brand .site-title {

display: none;

}

Navbar Box (span9)

The option to hide the shaded Navbar Box can be found in Customize>Header>Design And layout>>HEADER DESIGN AND LAYOUT>Display menu in a box

Social Icons (span5)

The option to show/hide the Social Icons can be found in Customize>Global Settings>Social Links

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* CENTER SOCIAL ICONS */
.navbar-wrapper .navbar.resp .social-block {
display:            block;
margin:             0 45%;              /* Adjust +/- % if needed */
}

/* CENTER SOCIAL ICONS */

.navbar-wrapper .navbar.resp .social-block {

display: block;

margin: 0 45%; /* Adjust +/- % if needed */

}

Tagline (span7)

The option to show/hide the Tagline can be found in Customize>Header>Design And Layout>HEADER DESIGN AND LAYOUT>Display the tagline

/* CENTER TAGLINE */
.navbar-wrapper .navbar.resp h2 {
display:            block;
text-align:         center;
margin:             0px 20%;            /* Adjust +/- % if needed */
}

/* CENTER TAGLINE */

.navbar-wrapper .navbar.resp h2 {

display: block;

text-align: center;

margin: 0px 20%; /* Adjust +/- % if needed */

}

Navbar (Menu)

The option to left-right justify the Navbar can be found in Customize>Header>Navigation>Menu position

The option to center the Navbar requires some CSS code to be added.

/* CENTER NAVBAR */
.navbar-inner {
    padding-right: 5px;
}
.tc-header .nav-collapse {
    float: none;
}
.navbar .nav {
    width: 100%;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.nav-collapse .nav > li {
    float: none;
    display: inline-block;
}
.nav-collapse .nav > li li {
    text-align: left;
}
.navbar div>ul.nav>.menu-item:last-child>a { 
    padding-right: 5px
}
@media (max-width: 979px) {
    .nav-collapse .nav > li {
        display: list-item;
    }
}

/* CENTER NAVBAR */

.navbar-inner {

padding-right: 5px;

}

.tc-header .nav-collapse {

float: none;

}

.navbar .nav {

width: 100%;

text-align: center;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.nav-collapse .nav > li {

float: none;

display: inline-block;

}

.nav-collapse .nav > li li {

text-align: left;

}

.navbar div>ul.nav>.menu-item:last-child>a {

padding-right: 5px

}

@media (max-width: 979px) {

.nav-collapse .nav > li {

display: list-item;

}

Credit: @d4z_c0nf

User positioning

Any element can be re-positioned by using CSS. There are different ways of achieving this, but here is one common method.

.selector {
    position:   relative;
    top:        0px;        /* Adjust */
    left:       0%;         /* Adjust */
}

.selector {

position: relative;

top: 0px; /* Adjust */

left: 0%; /* Adjust */

}

Read this Guide to CSS and HTML in the Customizr WordPress theme for more information on CSS and HTML