Vertical Topbar | TopBar Tips

TopBar Tips

Vertical Top Bar

Welcome to the return of TopBar Tips.

It has been over 6 months since I did any of these and many of you will not have seen the original ones.

As arch defender of top bar I thought it was about time to show you what it can do again.

The next page in this demo shows this vertical TopBar with a vertical Magellan in the drop-zone.

There is nothing on the page other than Foundation Stacks and some CSS.

By doing it this way, it remains perfectly responsive and still transitions to a mobile menu for small screens.

The sub-menus are just populated with dummy pages - just to demonstrate them in operation.

The CSS is shown below.

"Now go forth and make your CSS great"


@media only screen and (min-width: 40em) {

body{
margin-left:200px	
}	
	
 .top-bar, .top-bar-wrapper{
   height:100%;
   width:200px;
   position:fixed;
   left:0;
   top:0;
   padding-left:0!important;
   padding-right:0!important;
 }


.top-bar-section .has-dropdown > a::after{
border-color:transparent  transparent  transparent  rgba(255,255,255,0.4)!important	
}

.top-bar .ul.right{
float:none!important;
 }

.top-bar-section ul.menu.left{
float:none!important;	
}	
 
 .top-bar-section ul li{
 float:none!important;	
 }
ul.right > li{
  display:block;
  float:none!important;
  clear:both;
  border-bottom:1px solid #444;
  
}

ul.right > li:last-child{
  border-bottom:none;
}
.has-dropdown ul.dropdown{
  position:absolute !important;
  left:100% !important;
  top:0px;
  border-left:1px solid #444;
}
.top-bar-section .has-dropdown > a:after {
  top:45%;
  border-left:4px solid #aaa;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
}    

.top-bar-section ul .divider{
display:none;

}
.title-area, .title-area.name{
	display:block;
	float:none!important;
	height:auto!important;
	
}
.top-bar .title-area .name h1{
display:none!important	
}
}

This is my header1

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.

This is my header2

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.

This is my header3

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.