Skip to content
Back Home
  • Nimble Builder Pro
  • Customizr Pro
  • Hueman Pro
  • Blog
  • Search
Back Home
  • Nimble Builder Pro
  • Customizr Pro
  • Hueman Pro
  • Blog
Home » Snippets » Moving Header Block items (3.3)
code snippets css Header Logo Menu Navbar Social Icons Tagline Title

Moving Header Block items (3.3)

by Dave Bardell|Published 21 April 2015

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

You can search the user’s forum or ask the user community by opening a new thread in the Customizr theme forum. Before opening a new topic, you might want to follow the troubleshooting steps..

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

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 */

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

HD0010_Design_Layout

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

HD0010_Design_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;
}

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

HD0010_Design_Layout

Social Icons (span5)

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

social_links_options

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 */
}
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

NG103 Customize Menu3

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 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

NG105 Customize Menu5

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.

/* 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 */
}

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

AUTHOR

Dave Bardell
My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme in July 2013. Have learnt a lot from other Supporters (@ElectricFeet, @acub, @tomaja, and the maestro @d4z_c0nf, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com
0 posts

You may also like

Remove the ‘breadcrumb’ at top of pages
Published 27 November 2013

Remove the ‘breadcrumb’ at top of pages

To aid navigation, you can use a ‘breadcrumb’ at the top of pages. However, if you need to remove the ‘breadcrumb’, the […]

Customize logo link
Published 10 November 2013

Customize logo link

Use this function in your child theme’s functions.php to change the default link on your logo to another, custom link. Just replace […]

Published 4 January 2014

Firebug: the best-spent 6 minutes.

Firebug helps you you work with CSS styling. Watch this 6-minute video.

Published 24 October 2013

Creating a column layout in Customizr

The Customizr theme is built on Twitter Bootstrap, which means that you can use the awesome built-in grid system included in Bootstrap. […]

Impress your visitors with a perfect experience on smartphones

customizr-pro-screenshot

10K+ small businesses are already using the Customizr Pro WordPress theme for their online presence.

Discover Customizr Pro

About us

At presscustomizr.com we create popular freemium WordPress themes and plugins used by more than 150,000 websites worldwide, with a focus on simplicity and ease of use.

Our themes Customizr and Hueman are among the most popular and highly rated on wordpress.org, and regularly short listed by bloggers as some of the bests in the WordPress industry.

Post navigation

  • Previous post Make the Customizr home slider season based
  • Back to post list
  • Next post Display full-width pages

By continuing to use this site you consent to the use of cookies in accordance with our cookie policy.

Useful pages
  • Your account
  • Product Support
  • Documentation
  • Customizr theme release notes
  • Hueman theme release notes
Company
  • About
  • Blog
  • Privacy Policy
  • Terms of sale
  • Contact Us
Products and Services
  • Nimble Builder Pro
  • Customizr Pro theme
  • Hueman Pro theme
  • Customizr Theme
  • Hueman Theme

© 2022 Press Customizr – All rights reserved