ImpactPageBuilder
  • How To Customize Navbars In Impact

    As you’ll see in the above video tutorial, to customize your navbars in Impact you can paste the following code snippets into your Impact Template Custom CSS box and then add/edit the necessary styles. The First snippet (Empty Navbar CSS) provides you with the divs to add CSS, while the second snippet is the same thing, but with the default CSS filled in. Use whichever one you find easier to work with, or just grab the bits you need to customize your navbars.

    .

    Empty Navbar CSS:

    [css autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” padlinenumbers=”true” smarttabs=”true” light=”false” tabsize=”4″ toolbar=”true”].widget_nav_menu {

    }
    .widget_nav_menu ul {

    }
    .widget_nav_menu li {

    }
    .widget_nav_menu li a, .widget_nav_menu li a:link, .widget_nav_menu li a:visited {

    }
    .widget_nav_menu li a:hover, .widget_nav_menu li a:active {

    }
    .widget_nav_menu li li a, .widget_nav_menu li li a:link, .widget_nav_menu li li a:visited {

    }
    .widget_nav_menu li li a:hover, .widget_nav_menu li li a:active {

    }
    .widget_nav_menu li ul {

    }
    .widget_nav_menu li ul ul {

    }
    .widget_nav_menu li.current-menu-item a {

    }[/css]

    .

    Navbar CSS With Defaults Filled In

    [css autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” padlinenumbers=”true” smarttabs=”true” light=”false” tabsize=”4″ toolbar=”true”].widget_nav_menu {
    background: #000000;
    width: 100%;
    height: 38px;
    margin: 0px auto;
    color: #666666;
    font-size: 14px;
    font-weight: normal;
    line-height: 1em;
    float: none;
    display: block;
    }
    .widget_nav_menu ul {
    padding: 0 0 0 10px;
    float: left;
    list-style: none;
    }
    .widget_nav_menu li {
    float: left;
    list-style: none;
    }
    .widget_nav_menu li a, .widget_nav_menu li a:link, .widget_nav_menu li a:visited {
    background: #000000;
    padding: 12px;
    color: #AAAAAA;
    text-decoration: none;
    display: block;
    }
    .widget_nav_menu li a:hover, .widget_nav_menu li a:active {
    background: #333333;
    color: #FFFFFF;
    text-decoration: none;
    }
    .widget_nav_menu li li a, .widget_nav_menu li li a:link, .widget_nav_menu li li a:visited {
    background: #000000;
    width: 150px;
    padding: 12px;
    color: #AAAAAA;
    text-decoration: none;
    float: none;
    }
    .widget_nav_menu li li a:hover, .widget_nav_menu li li a:active {
    background: #333333;
    color: #FFFFFF;
    text-decoration: none;
    }
    .widget_nav_menu li ul {
    width: 150px;
    height: auto;
    margin: 0;
    padding: 0;
    z-index: 9999;
    left: -999em;
    position: absolute;
    }
    .widget_nav_menu li ul ul {
    margin: -38px 0 0 174px;
    }
    .widget_nav_menu li.current-menu-item a {
    background: #000000;
    color: #FFFFFF;
    text-decoration: none;
    }[/css]

    The above CSS examples will style ALL of your Impact Navbars while the below CSS gives you the ability to focus your styles on any one specific Navbar based on it’s Nav Menu ID. As you can see the following code will style only a Navbar with an ID of 1. So if your Navbar has an ID of 8 you will need to replace all of the instances of 1 with 8. Then you can treat the actual styling the same as you would the above CSS examples, knowing this will only style that ONE particular Navbar.

    So in effect, this gives you the ability to uniquely style an UNLIMITED number of Navbars on an UNLIMITED number of Impact pages. Yet another example of what makes the Impact/Wordpress combination so powerful!

    NOTE: To determine what your different Navbar IDs are you’ll need to either refer to your browser Page Source or use Firebug (Learn How To Use Firebug). Either way you’ll want to locate the HTML code that is creating the Navbar in question and find the li ID that looks something like:

    [code]li id="#nav_menu-1"[/code]

    With the number 1 being whichever ID is associated with that particular Navbar (ie. that number is the Navbar ID).

    .

    Empty Navbar CSS Focused On Specific Navbar ID:

    [css autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” padlinenumbers=”true” smarttabs=”true” light=”false” tabsize=”4″ toolbar=”true”]#nav_menu-1 {

    }
    #nav_menu-1 ul {

    }
    #nav_menu-1 li {

    }
    #nav_menu-1 li a, #nav_menu-1 li a:link, #nav_menu-1 li a:visited {

    }
    #nav_menu-1 li a:hover, #nav_menu-1 li a:active {

    }
    #nav_menu-1 li li a, #nav_menu-1 li li a:link, #nav_menu-1 li li a:visited {

    }
    #nav_menu-1 li li a:hover, #nav_menu-1 li li a:active {

    }
    #nav_menu-1 li ul {

    }
    #nav_menu-1 li ul ul {

    }
    #nav_menu-1 li.current-menu-item a {

    }[/css]