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:
1 2 |
.sticky-disabled .sticky-enabled |
By adding either of these to the generic selector will limit code to that state. For example,
1 2 3 |
.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:
1 2 3 4 |
/* 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.
1 2 3 4 5 |
/* 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
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.
1 2 3 4 5 6 |
/* 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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* 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.
1 2 3 4 5 |
.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
