Format the Main Menu Section

by | May 12, 2016 | CSS, Customizr, Documentation | 0 comments

The main menu is in the header area.  Adding each snippet of CSS code to your styles.css will allow you to override any default settings.

This will remove any formatting that comes with the default setting or settings you may have set in the Customize - Font section.  This does not change the font size, font color, or the hover colors.

 

.navbar .nav > li > a
{
text-shadow: none;
border: none;
}
.nav > li
{
border: none;
}
/* Adjust Menu colors - Hover */
.navbar .nav > li > a:hover
{
text-shadow: none;
border: none;
}

Remove the top and bottom borders.

 

.tc-header {
border-top: none; /* Remove colored bar */
border-bottom: none; /* Remove grey bar */
}

When the menu is viewed from a small (narrow) device, make sure the menu does not cover the complete screen.

/* Reset nav width and search floating for mobile menu */
@media (max-width: 979px)
{

      .navbar .nav .my-nav-menu-search
      {
      float: left;
      }
      .navbar .nav
      {
      width: 45%; /*auto; */
      }

}

468

Pin It on Pinterest

Share This