Customizr Navbar Guide 3.3


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

Just about every website you see these days will almost certainly contain a Menu (aka Navbar) to enable the User to navigate around the various Pages you have built. By now, you will be familiar with Customizr’s own Navbar, part of its’ unique style.

NG0010 Navbar

It is a common request on the Forum to customize the Navbar, and you will find a number of Snippets that address this subject.

This Guide is intended to take these Snippets a bit further and show you ideas on how you might change the look-and-feel of your Navbar in order to personalize the style of your website.

3.3 Since Customizr v3.3 was launched, a new set of features was added which make changes easier without the need for CSS or php code. This Guide has been updated to reflect these changes but leaving some of the CSS/php code suggestions as a viable alternative, and to improve understanding of how the Navbar works in WordPress/Customizr.

Basics required

Before we start, let’s make sure that you understand the basics. If you are an Advanced User then feel free to skip this next bit.

  • HTML: Have to assume you know this or you wouldn’t be reading this Guide.
  • CSS: Most of this Guide will cover this area. You may find these Navbar Snippets useful as an Introduction.
  • PHP: You don’t need to understand PHP, but some of the Snippets use PHP so make sure you cut&paste accurately.
  • Javascript: May need to add some Javascript for some effects. Again, no need to understand, just cut&paste accurately.
  • Child Theme: You must know by now that we highly recommend using a child theme. Do not hack core files. For more information, read this Guide.

Tip: To cut&paste from Snippets:

NG003 Snippet editor

Step 1: Remove row numbers using button 1

NG004 Snippet editor
NG005 Snippet editor

Step 2: Cut&Paste using button 4

NG006 Snippet editor

Sticky Header

3.3 A new feature was introduced in v3.3 to add a Sticky Header. As it introduces some extra CSS code, let’s just deal with this now.

NG0015 Navbar

The CSS selector to change the Navbar is:

Any code inserted above will change both the normal & sticky header. To make changes to only one then use:

For ease of understanding, the rest of this Guide will ignore this difference. See the Header>Design and layout documentation for more information.

Customizr Navbar Core Components

This is what the default Customizr Navbar looks like:

NG0020 Header Box

Let’s break this down into its’ core components.

  1. Social Icons, float:left inside the Navbar Box
  2. Tagline, float:right inside the Navbar Box
  3. Menu Items, float:left inside the Navbar Box
  4. Navbar Box, surrounds the outside of the Navbar

This Guide will focus on the Navbar Box and the Menu Items

 

Conclusion

This has covered the basics and hopefully given some insight on how to improve the basic menu in Customizr. There are further concepts that can improve further, such as Transitions. Will add to this Guide when I can.