Customizr Navbar guide


Just about every website you see these days will almost certainly contain a 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.
NG001 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.

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 numbers using button 1

NG004 Snippet editor
NG005 Snippet editor

Step 2: Cut&Paste using button 4

NG006 Snippet editor

Customizr Navbar Core Components

This is what the default Customizr Navbar looks like:

NG002 Navbar Box

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

ItemDescriptionCSS Selector
Social Iconsfloat:left inside the Navbar Box.navbar-inner .social-block
Taglinefloat:right inside the Navbar Boxh2.site-description
Menu (Items)float:left inside the Navbar Box.navbar .nav > li > a
Navbar Boxsurrounds the outside of the Navbar.navbar.notresp .navbar-inner

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

Advanced

This final section addresses the more Advanced features of the Customizer menu system

Watch out for further updates – coming soon

Positioning with php

Using CSS to reposition elements will generally work, but may not always be “pixel-perfect”. This is often true when moving an element outside its’ parent using margin-left: -30%, for example.

The more accurate solution is to use one of the many hooks available in Customizr.

For more information on using hooks, actions and filters, read this Guide.

Special Effects

CSS allows some special Transitions that enable us to add animation to the menu items and dropdowns. It is outside the scope of this Guide to try to show every possible animation. For novices, the recommended approach would be to look for a suitable plugin. For more advanced users who want to code it themselves, I recommend using Firebug to diagnose how it’s done.

To see a comprehensive set of examples of different Navbars that can be achieved with CSS, go to
www.cssmenus.co.uk

To see a comprehensive tutorial on animations that can be achieved with CSS, go to
www.cssanimate.com

Responsiveness

If you are unfamiliar with the concept of Responsiveness, then start by reviewing this Snippet

Twitter Bootstrap defines the point at which Customizer changes the menu structure. At 979/980px width, the menu reduces to a 3-bar button. By clicking on the button, Level 2+ menu items are revealed.

NG018 3-bar menu

Just like the full navbar, these menu items need to be styled using similar CSS properties. A new set of selectors is now required:

 

 

At this point, the term ‘specificity’ becomes very important. For a simple explanation, try this article. When adjusting Navbar styling, you will need to decide whether the styling applies to both non-responsive and/or responsive items. For example, consider the impact of these 3 selectors:

Take a look at the CSS Structure for the Navbar in the Appendix and it should become clearer to you.

So to complete the responsive 3-bar dropdown and the fullsize menu, the final code we’ll use is:

Another common request is to add an icon to the Menu Item:

NG019 Genericons

This solution uses the Genericons icons which can be found at www.genericons.com

Well that’s enough for now. If there are specific questions about any of the above then please leave a Comment below, or better still, go to the Forum to get a solution, with a much wider audience to help fix problems. And important, please include a link to your Site.

Appendix – CSS Summary

 

CSS Structure

 

Selectors

Generic
.navbar navbar-innerNavbar Box
.navbar .nav > li > aMenu item
.navbar .nav > li > a:first-letterMenu item – First Letter
.navbar .nav > li > a:hoverMenu item – Mouse Hover
.navbar .nav > li > a:hover:first-letterMenu item – First Letter/Mouse Hover
.navbar .nav > li > a:activeMenu item – Item selected
.navbar .nav > li > a:active:first-letter,Menu item – Item selected/Mouse Hover
.navbar .nav > li.current-menu-item > aMenu item – Item selected
.navbar .nav > li.current-menu-ancestor > aMenu item – Ancestor Item selected
.navbar .dropdown-menu > li > aLevel 2 Menu Items
.navbar .dropdown-menu > li.current-menu-item > aLevel 2 Menu Items
.navbar .dropdown-menu > li.current-menu-ancestor > aLevel 2 Menu Items
.navbar .dropdown-menu > li > a:hoverLevel 2 Menu Items
.navbar .dropdown-menu > li > a:focusLevel 2 Menu Items
.navbar ul.nav li.dropdown:hover > ul.dropdown-menuLevel 2 Menu Items
.navbar .dropdown-submenu > li > aLevel 3 Menu Items
.navbar .dropdown-submenu > li.current-menu-item > aLevel 3 Menu Items
.navbar .dropdown-submenu > li.current-menu-ancestor > aLevel 3 Menu Items
.navbar .dropdown-submenu > li > a:hoverLevel 3 Menu Items
.navbar .dropdown-submenu > li > a:focusLevel 3 Menu Items
.navbar ul.nav li.dropdown:hover > ul.dropdown-menuLevel 3 Menu Items
Non-responsive
.navbar.notresp navbar-innerNavbar Box
.navbar.notresp .nav > li > aMenu item
.navbar.notresp *See Generic
Responsive
.navbar.resp navbar-innerNavbar Box
.navbar.resp .nav > li > aMenu item
.navbar.notresp *See Generic

Properties

Styling
font-family: “[Open Sans]” ;Font
font-size: [0]px|[0]em|[0]% ;Font Size
font-weight: normal|bold| ;Font Weight
color: name|#nnnnnn ;Text Color
background-color: name|#nnnnnn ;Background Color
background-image: linear-gradient(to bottom, name|#nnnnnn, name|#nnnnnn);Gradient Background
background-image: -webkit-linear-gradient (top, name|#nnnnnn, name|#nnnnnn);Safari/Chrome specific
background-repeat: repeat-x|repeat-y|repeat-xy;Repeat in x/y dimensions
border|border-top|border-right|border-bottom|border-right: [0|(-)n]px solid name|#nnnnnn;Border size/pattern/color
border-radius: [0|(-)n]px [0|(-)n]px [0|(-)n]px [0|(-)n]px;Rounded corners
Positioning
margin|margin-top|margin-right|margin-bottom|margin-right: [0|(-)n]px;Margins
padding|padding-top|padding-right|padding-bottom|padding-right: [0|(-)n]px;Padding
position: relative|absolutePositioning an element
top|bottom: [0|(-)n]px;Adjusting y position
left|right: [0|(-)n]%;Adjusting x position
Display
display: none|block|inline;How element is displayed
min-height|height|max-height: [0|(-)n]px;Height/Min/Max
min-width|width|max-width: [0|(-)n]%;Width/Min/Max