Customize the navigation header of a responsive template


	Customize the navigation header of a responsive template
	Last Edited - 08/16/2013 3:08pm PDT
	Category Path - Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

The responsive template packages produced by Modular Merchant are designed using the Twitter Bootstrap "Fluid layout".

There are many different style rules involved in the nav header of responsive templates. In some template packages, all or most of these style rules have already been added to the template_styles.css stylesheet and are ready to be customized.

In other template packages, many of the rules are set in the bootstrap.css and boostrap-responsive.css stylesheets. These stylesheets should not be edited, so in this situation, it would be necessary to first add the style rules to the template_styles.css stylesheet, then customize the rules within template_styles.css.

Style rules for the basic components of the nav header

.nav-header { }
The .nav-header style set may be used to specify default style rules for text in the nav header. Most if not all, of the text in the nav header is actually links. So any later rules to style links in the nav header would override this set of rules to style text.

example

.nav-header {
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: rgb(255,255,255);
}

This set of rules specifies that text in the nav header should use the Trebuchet MS font if it is available. If that font is not available, then the Helvetica font will be used instead. If that font is also not available, then the default sans-serif font will be used.

Additionally, the font size is set to 14 pixels. Text is also specified to be bold by default, and the text color is set to white.

.navbar-inverse .navbar-inner {}
The .navbar-inverse .navbar-inner style set may be used to specify the background for the nav header, as well as other elements such as a border and drop shadow.

example

.navbar-inverse .navbar-inner {
background: rgb(0,0,0);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

This set of rules specifies that the nav header should have a black background, and should have a drop shadow to make the nav header appear to float above the page.

.navbar a, .navbar-inverse .nav > li > a, .navbar-inverse .nav > li a {}
The .navbar a, .navbar-inverse .nav > li > a, .navbar-inverse .nav > li a style set may be used to specify styles for links in the nav header.

example

.navbar a, .navbar-inverse .nav > li > a, .navbar-inverse .nav > li a {
    font-family: 'Trebuchet MS', serif;
   color: rgb(126,249,35);
   text-decoration: none;
}

This set of rules specifies that links in the nav header should use the Trebuchet MS font if it is available. If that font is not available, then the default serif font will be used.

Additionally, the text color is set to neon green. And the "text-decoration" is set to none, so that links in the nav header will not be underlined.

.navbar a:hover, .navbar-inverse .nav > li > a:hover, .navbar > .nav > li > a:hover {}
The .navbar a:hover, .navbar-inverse .nav > li > a:hover, .navbar > .nav > li > a:hover style set may be used to specify styles for links in the nav header when they are moused over.

example

.navbar a:hover, .navbar-inverse .nav > li > a:hover, .navbar > .nav > li > a:hover {
color: rgb(249,181,35);
}

This rule specifies that when a link in the nav header is moused over, the text is set to orange.

.navbar .brand {}
The .navbar .brand style set may be used to specify styles for the company name in the nav header.

example

.navbar .brand {
color: rgb(249,181,35);
font-size: 150%;
}

This rule specifies that the company name should be displayed in orange text, and 150% larger than the default text size.

.navbar a.brand:hover {}
The .navbar a.brand:hover style set may be used to specify styles for the company name link when it is moused over.

example

.navbar a.brand:hover {
color: rgb(255,255,255);
}

This rule specifies that when the company name link is moused over, the text color is set to white.

a.btn-mini, ul.dropdown-menu li, ul.dropdown-menu li > a {}
The a.btn-mini, ul.dropdown-menu li, ul.dropdown-menu li > a style set may be used to specify styles for the customer account button and dropdown menu in the nav header.

example

a.btn-mini, ul.dropdown-menu li, ul.dropdown-menu li > a {
font-family: 'Trebuchet MS', Arial, sans-serif;
color: black;
}

This set of rules specifies that the customer account button and dropdown menu should use the Trebuchet MS font if it is available. If that font is not available, the Arial font should be used. If that font is also not available, then the default sans-serif font will be used.

Additionally, the text color of the customer account button and dropdown menu is set to black.

a.btn-mini:hover {}
The a.btn-mini:hover style set may be used to specify styles for the link text of the customer account button when it is hovered over. If the default hover color for links in the nav header is a pale color, then it is recommended to add a style rule to this set so that the text of the customer account button is legible when moused over.

example

a.btn-mini:hover {
color: black;
}

This rule specifies that when the customer account button is moused over, the link text is black. Without this rule, the link text would be displayed in the color specified in the .navbar a:hover, .navbar-inverse .nav > li > a:hover, .navbar > .nav > li > a:hover style set, which would not show up well against the pale grey button.

.dropdown-menu > li.divider {}
The .dropdown-menu > li.divider style set may be used to specify styles for the "divider" between items in the customer dropdown menu in the nav header.

example

.dropdown-menu > li.divider {
margin: 0px;
}

This rule specifies a margin of zero pixels for the divider between menu items in the customer dropdown menu.

.dropdown-menu li > a {}
The .dropdown-menu li > a style set may be used to specify styles for the link text of menu items in the customer dropdown menu.

example

.dropdown-menu li > a {
font-size: 85%;
}

This rule specifies that links in the customer dropdown menu are displayed with text 85% of the default size.

.dropdown-menu > li > a:hover {}
The .dropdown-menu > li > a:hover style set may be used to specify styles for an item in the customer dropdown menu when it is moused over.

example

.dropdown-menu > li > a:hover {
background: rgba(0,0,0,0.8);
color: white;
}

This set of rules specifies that when an item in the customer dropdown menu is moused over, the item should be displayed with a semi-transparent black background and white text.

Style rules for the basic components of the nav header on small screens

Responsive template packages developed by Modular Merchant include a special set of style rules to adjust the page layout for small screens, such as tablets and smartphones. For instance, on larger screens, the nav header is displayed as a horizontal bar across the top of the page. But on small screens, the nav header becomes a collapsible vertical list.

When collapsed, the company name is displayed at the left end of the nav bar, and an "expand/collapse menu" button is displayed at the right end of the nav bar. When expanded, the additional nav menu items (including the store home icon, the "Track Shipment" link, the "View Cart" link, and the "Checkout" link) are displayed in a vertical list below the company name. The customer login button and dropdown menu are displayed at the right, below the "expand/collapse menu" button.

In order to style various elements of the expanded or collapsed vertical nav menu, additional style rules may need to be added to template_styles.css and customized. These additional style rules should all be enclosed within a screen size media query.

@media (max-width: 980px) {}
The @media (max-width: 980px) media query may be used to enclose style sets that are only applied when the page is viewed on a small screen.

example

@media (max-width: 980px) {
/* Insert "small screen" rules between the opening and closing curly brace of the media query. */
}

.nav-collapse .nav > li {}
The .nav-collapse .nav > li style set may be added inside a media query, to apply different styles to the vertical navigation menu items without affecting the display of horizontal menu items.

example

@media (max-width: 980px) {
   .nav-collapse .nav > li {
       border: 1px solid rgba(126,249,35,0);
       background: rgba(0,0,0,0.3);
   }
}

This set of rules specifies a transparent border and an almost transparent black background for navigation menu list items.

.nav-collapse .nav > li:hover {}
The .nav-collapse .nav > li:hover style set may be added inside a media query, to apply different styles to the moused over vertical navigation menu items without affecting the display of horizontal menu items.

example

@media (max-width: 980px) {
     .nav-collapse .nav > li:hover {
       border: 1px solid rgba(126,249,35,0.7);
       background: rgba(0,0,0,0.6);
   }
}

This set of rules specifies a slightly transparent neon green border to a navigation menu item when it is moused over. The background of a moused over navigation menu item will also be a less-transparent black.

div.btn-group.pull-right > a:first-of-type {}
The div.btn-group.pull-right > a:first-of-type style set may be added inside a media query, to specify rules for the customer account button.

example

@media (max-width: 980px) {
   div.btn-group.pull-right > a:first-of-type {
       min-width: 140px;
   }
}

This rule sets a minimum width of 140 pixels for the customer account button. The arrow button to the right, which is used to show or hide the customer dropdown menu, has a width of 20 pixels. By specifying a minimum width for the customer account button that is 20 pixels smaller than the minimum width of the customer dropdown menu, the customer account button and arrow button together should be the same width as the dropdown menu.

.pull-right .dropdown-menu {}
The .pull-right .dropdown-menu style set may be added inside a media query, to specify rules for the customer dropdown menu.

example

@media (max-width: 980px) {
   .pull-right .dropdown-menu {
       margin: 0px;
       min-width: 160px;
   }
}

This rule sets a margin of 0 pixels and a minimum width of 160 pixels for the customer dropdown menu. By specifying a minimum width for the customer dropdown menu that is 20 pixels wider than the minimum width of the customer account button, the customer account button and arrow button together should be the same width as the dropdown menu.

.dropdown-menu li > a, .navbar-inverse .nav-collapse .dropdown-menu a {}
The .dropdown-menu li > a, .navbar-inverse .nav-collapse .dropdown-menu a style set may be added inside a media query, to specify rules for the menu items in the customer dropdown menu.

example

@media (max-width: 980px) {
   .dropdown-menu li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
       background: rgba(255,255,255,0.9);
       color: black;
   }
}

These rules specify a slightly transparent white background and black text for the items in the customer dropdown menu.

.dropdown-menu li > a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:hover {}
The .dropdown-menu li > a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:hover style set may be added inside a media query, to specify rules for moused over menu items in the customer dropdown menu.

example

@media (max-width: 980px) {
   .dropdown-menu li > a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:hover {
       background: rgba(126,249,35,0.7);
   }
}

This rule specifies a slightly transparent neon green background for moused over items in the customer dropdown menu.

regarding customized html templates

We're always happy to help when we can, but once a template's HTML code has been customized by a third party, troubleshooting those customizations falls outside of what Modular Merchant can provide within our range of free technical support.

Fixing larger template issues may require paid development time. We evaluate each request on a case-by-case basis. If a request is so large that it requires a custom web design project to resolve, we will always provide a proposal for the client's approval prior to performing any billable work.