glFusion Wiki

Site Tools


glfusion:styling:navbar

Navbar

This is the container that holds the logo, menu, search box, etc. The navbar HTML is located in the header.thtml file. There are CSS styles that determine the look and feel for the following items typically used in the navbar:

  • brand (logo - either text or graphic)
  • menu
  • buttons (for example the Login button)
  • search box
  • toggle - shown on smaller devices to trigger the off-canvas navigation

The navbar is wrapped by 2 primary styles:

  • uk-navbar
  • tm-navbar

The uk-navbar style is the base style from the UIKIT framework. The tm-navbar style is the theme style, where we override some of the UIKIT framework styles.

      .tm-navbar {
        border-radius:0;
        padding: 6px 0px 6px;
        border: medium none;
        background: #325482 none repeat scroll 0% 0%;
        outline: none;
        text-shadow:none;
      }

.tm-navbar controls the primary look and feel:

border-radius:0;This sets the corners to square. Since the navbar sits in at the top of the page, rounded corners would not look good.
padding: 6px 0px 6px;Set 6px padding on top and bottom to provide a taller navigation area and make the hover look better
border: medium none;Sets border width to medium with no style.
background: #325482 none repeat scroll 0% 0%;Set the background to the dark blue
outline: none;No outline
text-shadow:none;Remove the text-shadow attribute that is included by UIKIT

You will notice we are not overriding the color: attribute here - it will still inherit the #444 color from .uk-navbar. We have several other places below where we override the color of the text specifically for menu elements, etc.

The brand, or logo area, is handled by 2 templates:

  • header.html - wraps the logo template in a uk-hidden-small div so the brand is not displayed on smaller screens.
  • logo-text.thtml or logo-graphic.thtml - depending on whether you are using the text or graphic logo.

logo-text.thtml using the following styles to control the look of the brand:

  • uk-navbar-brand
  • tm-navbar-brand

tm-navbar-brand is defined in style.css

  .tm-navbar-brand {
    color: #eee;
    text-shadow:none;
    font-weight:700;
  }
   
  .tm-navbar-brand:hover,
  .tm-navbar-brand:focus,
  .tm-navbar-brand a:active, 
  .tm-navbar-brand a:visited,
  .tm-navbar-brand a:link {
    color:#fff;
    text-shadow: none;
   }

The styling is very straight forward - these 2 classes set the color to #eee for the standard color and to #fff for hover. Both styles remove any text-shadow that might be inherited from the standard UIKIT classes. You'll notice we did not set a background color since it will use the background of the nav bar.

The navigation menu is a bit complicated as we are using 2 toolkits to provide the navigation. UIKIT styles are used to wrap the navigation and then SmartMenus styles are used to control the actual navigation menu. We have integrated SmartMenus into glFusion leveraging the UIKIT styles as much as possible.

As mentioned above, the header.thtml template contains the primary navbar HTML. The horizontal navigation menu uses the themename/menu/menu_horizontal_cascading.thtml template.

If you are using the uikitlogin: auto tag, which is included by default in the CMS theme, it also has a set of styles - the auto tag does not use a template, it is hard coded to provide either the Login button, or the My Account drop down menu for logged-in users.

Menu Styling

The SmartMenus are wrapped in uk-navbar-nav, tm-navbar-nav and sm-uikit styles.

SmartMenus will pickup it's colors from the UIKIT styles and our custom tm-* styles defined below

Since both the SmartMenus and the My Account drop down use the tm-navbar-nav style, can easily style the menu elements for both with the style below - this will set the attributes for all top level menu items.

      .tm-navbar-nav > li > a {
        border: medium none;
        border-radius: 3px;
        font-size: 15px;
        margin: 0;
        text-shadow: none;
        color: #fff;
      }
border: medium none;Set the border to medium with no style
border-radius: 3px;Use rounded corners, this affects the My Account hover
font-size: 15px;Set our font size for our menu items
margin: 0;Remove all the margins
text-shadow: none; No shadow on text - this overrides the UIKIT default
color: #fffSet the color for all items on the menu to white

The background color is picked up from the nav bar.

Nav Bar Menu Hover Color

We can also style the hover colors for both the SmartMenu and My Account drop down:

  /* set color and background color for top level hover */
  .tm-navbar-nav > li:hover > a,
  .tm-navbar-nav > li > a:focus,
  .tm-navbar-nav > li > a:active,
  .tm-navbar-nav > li.uk-open > a {
     background-color: transparent;
     color: #fff;
     outline: none;
     background: #35B3EE  none repeat scroll 0 0;
  }

This is the style that handled the hover color of the main items on the nav bar.

By changing the two styles above, we were able to change the text color and the hover background for the first level (top level) menu items for both the SmartMenus and the My Account drop down.

Finally, we need to set up a couple of styles to handle the second tier drop down menus, these would be the second level menus or below:

  /* - set background on drop down - */
  .tm-navbar ul li ul {
    background: #325482;
  }

This style sets the background color for any 2 level or below drop down menus.

  /* set hover background for second level and below drop down menus */
  .tm-nav-navbar > li > a:focus,
  .tm-nav-navbar > li > a:hover {
    background:#35B3EE;
    text-shadow:none !important;
  }

This style sets the hover background color for the 2nd level or below drop down menus or menu items. It also removes any text-shadow: attributes inherited from the UIKIT classes.

Arrows that denote sub menus

To change the arrows for dropdown menus - add the following style to your custom.css - change the #000 to the color you wish to use.

  .sm-uikit a span.sub-arrow {
border-color: #000 transparent transparent transparent;
  }

Login Button

The CMS theme includes the uikitlogin auto tag which is used in the main navigation menu to provide a Login button or a My Account menu depending on whether the user has logged into the site.

You can customize the color of the button by specifying a CSS style in custom.css for .tm-button-login.

Smart Menu Overflow Scroller

FIXME Need to put the styles that control it.

FIXME Need info on how to style the search box

Off Canvas Menu

FIXME Walk through how the off-canvas menus work

Tips & Tricks

  • Add header above the nav bar
glfusion/styling/navbar.txt · Last modified: 2017/08/21 14:01 (external edit)

Page Tools