Adjust Navbar Box Settings

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.*

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.

Colors

/* START OF Adjust Navbar Box Settings - colors */
 .tc-header, .navbar.notresp .navbar-inner  {
background-color:   pink;                                       /* Change pink */
background-image: linear-gradient(to bottom, white, pink);      /* Change white, pink */
background-image: -webkit-linear-gradient (top, white, pink);   /* Change white, pink */
background-repeat: repeat-x;
border:           1px solid pink;                               /* Change pink */
border-radius:    4px 4px 4px 4px;
box-shadow:       0 1px 4px rgba(0, 0, 0, 0.067);
min-height:       40px;
padding-left:     20px;
padding-right:    20px;
}
/* END OF Adjust Navbar Box Settings */

 

Position

In addition, the Navbar Box can be positionally moved using:

/* START OF Adjust Navbar Box Settings - position */
/*  Reposition Navbar Box - change top/left as needed */
.navbar.notresp .navbar-inner {
position:       relative;
top:            0px;            /* Adjust using -1px move Up, 1px move Down, 0px No change  */
left:           0%;             /* Adjust using -1% move Left, 1% move Right, 0% No change  */
}
/* END OF Adjust Navbar Box Settings */

Hide

Customizr introduced built-in feature changes in v3.3. Go to Customize>Header>Design and layout. Adjust the Display menu in a box setting.

HD0010_Design_Layout

In addition, the Navbar Box can be hidden using:

/* START OF Adjust Navbar Box Settings - hide */
.navbar,
.navbar .navbar-inner,
.navbar .nav {
    webkit-box-shadow:  none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    background:         none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
/* END OF Adjust Navbar Box Settings */

(Credit: @ElectricFeet)

22 thoughts on “Adjust Navbar Box Settings”

Comments are closed.