Styling the Foundation TopBar: a ready to use CSS

Foundation is an interesting alternative to the Boostrap framework for developing HTML 5 responsive websites: it provides quite a lot of navigation options. The most used by me is the TopBar.

The TopBar can be customized using SCSS but in my case i prefer to style and customize its colours and backgrounds using a normal CSS stylesheet.

In the below example i’m fully styling the navigation TopBar with the minimum possible CSS i was able to figure out.

You can use it a ready to use CSS copy-and-paste example to put in your project to completly customize the Foundation TopBar colours and backgrounds according to the theme you’re developing for your responsive website.

 

/* area that is not covered by any menu's items*/ 
.top-bar 
/* logo area */
,.top-bar-section ul li, .top-bar.expanded .title-area 
/* menu item */
,.top-bar-section li:not(.has-form) a:not(.button) 
/* menuitem with dropdown when hovering */
,.top-bar-section ul li:hover:not(.has-form) > a 
{
    background: transparent;
}

/* general font and colors */
.top-bar-section ul li > a 
/* topbar H1 name */
,.top-bar .name h1 a, .top-bar .name h2 a, .top-bar .name h3 a, .top-bar .name h4 a, .top-bar .name p a, .top-bar .name span a
{
    font-family: "Crimson Text",serif;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

/* menu item when hover */
.top-bar-section li:not(.has-form) a:hover:not(.button) 
{
    background: transparent;
    color: #4caf50;
}

/* parent menu item when leaving a hovered child for another parent menu item */
.top-bar-section li.hover > a:not(.button) {
    color: #333;
}

/* menu item when active */
.top-bar-section li.active:not(.has-form) a:not(.button) 
{
    background: transparent;
    font-weight: 700;
    color: #333;
}

/* menu item when active and hover */
.top-bar-section li.active:not(.has-form) a:hover:not(.button) 
{
    background: transparent;
    color: #4caf50;
}

/* dropdown arrow color */
.top-bar-section .has-dropdown > a::after 
{
    border-color: rgba(51, 51, 51, 0.4) transparent transparent;
}

/* dropdown parent when hovering a child item */
.top-bar-section ul li:hover:not(.has-form) > a 
{
    color: #333;
}

/* ul.dropdown, only to add border no background */
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown, .top-bar-section .has-dropdown > a:focus + .dropdown
{
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* dropdown child */
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) 
{
    background: #fff;
    color: #333;
}
/* dropdown child when hover */
.top-bar-section .dropdown li:hover:not(.has-form):not(.active) > a:not(.button) 
{
    background: #fff;
    color: #4caf50;
}

/* on small screen */

/* content of the toggled menu */
.top-bar .toggle-topbar.menu-icon a 
{
    color: #333;
}
/* toggle 3 horizontal bars */
.top-bar .toggle-topbar.menu-icon a span::after 
{
    box-shadow: 0 0 0 1px #333, 0 7px 0 1px #333, 0 14px 0 1px #333;
}
/* responsive dropdown back menu */
.top-bar-section .dropdown li.parent-link a, .top-bar-section .dropdown li.title h5 a {
    color: #333;
    font-family: "Crimson Text",serif;
    font-size: 18px;
    text-transform: uppercase;
}

 

Using the Foundation TopBar with WordPress

Using Foundation TopBar with WordPress requires that you have a compatible theme. WordPress uses the class “current-menu-item” to highlight the menù for the default URL. So, your theme need to add the class “active” when “current-menu-item” class is present too.

Also you need to add different classes for dropdown menues to work.

 

Highlight parent menù items with WordPress

This is a little easier, wordpress will add the classes “current-menu-ancestor” and “current-menu-parent” to the menù item. So, to highlight the parent menù just add the following CSS code:

/* wordpress parent menu active */
.top-bar-section li.current-menu-ancestor:not(.has-form) a:not(.button)
,.top-bar-section li.current-menu-parent:not(.has-form) a:not(.button)
{
    background: #222;
}

 

Change the height of the TopBar

If you have a bigger logo and 45px of height is too low for you, i usually set it to 60px. Just add those CSS rules:

.top-bar, .top-bar .name {
	height: 60px;
}
.top-bar-section li:not(.has-form) a:not(.button) {
	line-height: 60px;
}

However for mobile this could be too big, so lets use a big logo only for bigger screens:

.top-bar .logo img {
  max-height: 46px;
  width: auto;
}

@media only screen and (min-width: 40.063em) {
  .top-bar {
    height: 60px;
  }
  .top-bar-section li:not(.has-form) a:not(.button) {
    line-height: 60px;
  }
  .top-bar .logo img {
    max-height: 60px;
  }
}

 

Styling the Foundation TopBar: a ready to use CSS, 5.0 out of 5 based on 1 rating
GD Star Rating
loading...