Show breadcrumbs all the time

Even demo page got this like this. You have to put your mouse on little house to show breadcrumbs location

I want to leave breadcrumbs visible there all the time not just when you put your mouse on that little house?

NormanUK has made this happen for the joomla 1.7 version, so if you read this NormanUK, it would be great if you could make a joomla 1.5 solution to do the same

best regards
121261

Sure, here you are. Disable any modules in topmenu2
Find File: templatesgk_twn2csstemplate.css
Find Lines: 83 to 96 which is below

Code: Select all

/* breadcrumbs at top */
#gk-bottom-menu #gk-breadcrumb { position: absolute; top: 4px; left:11px; width: 21px; height: 21px; background: transparent url('../images/breadcrumbs_icon.png') no-repeat left top; cursor: pointer; z-index:1; overflow: hidden; }
#gk-bottom-menu #gk-breadcrumb .breadcrumbs { background: transparent url('../images/breadcrumbs_icon.png') no-repeat left -21px; margin-left: -9999px; width: auto; float: left; opacity: 0; font-size: 11px; }
#gk-bottom-menu #gk-breadcrumb .breadcrumbs li.separator { display: block; float: left; width: 4px; margin: 0 10px; height: 21px; background: transparent url('../images/separator_white.png') no-repeat left 9px; text-indent:-999em; }
#gk-bottom-menu #gk-breadcrumb .breadcrumbs li a { color: #666; }
#gk-bottom-menu #gk-breadcrumb .breadcrumbs li.pathway { color: #cb260a; }
#gk-bottom-menu #gk-breadcrumb .breadcrumbs li a:hover { color: #000; }
#gk-bottom-menu #gk-breadcrumb .breadcrumbs > ul { margin-left: 21px; background: transparent url('../images/breadcrumbs_icon.png') no-repeat right bottom; height: 21px; line-height: 21px; padding: 0 15px 0 8px; }
#gk-bottom-menu #gk-breadcrumb .breadcrumbs > ul > li { float: left; width: auto; clear: none; line-height: 21px; }
#gk-bottom-menu #gk-breadcrumb:hover { width: 80%; }
#gk-bottom-menu #gk-breadcrumb .breadcrumbs { -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; }
#gk-bottom-menu #gk-breadcrumb:hover .breadcrumbs { margin-left: 0; opacity: 1; }
#gk-bottom-menu #gk-breadcrumb:hover + #gk-top-menu2 { opacity: 0; filter: alpha(opacity=0); }
/* standard breadcrumb */


Replace it with below

Code: Select all

/* breadcrumbs at top */
#gk-bottom-menu #gk-breadcrumb  { position: absolute; top: 4px; left:11px; width: auto; height: 21px; background: transparent url('../images/breadcrumbs_icon.png') no-repeat left top; cursor: pointer; z-index:1; overflow: hidden;  }
#gk-bottom-menu #gk-breadcrumb  > div { height: 32px; border-bottom: 1px solid #f0f0f0; padding: 0px 12px 0; }
#gk-bottom-menu #gk-breadcrumb  .breadcrumbs { background: transparent url('../images/breadcrumbs_icon.png') no-repeat left -21px; font-size: 11px; }
#gk-bottom-menu #gk-breadcrumb  .breadcrumbs li.separator { display: block; float: left; width: 4px; margin: 0 10px; height: 21px; background: transparent url('../images/separator_white.png') no-repeat left 12px; text-indent:-999em; }
#gk-bottom-menu #gk-breadcrumb  .breadcrumbs li a { color: #666; }
#gk-bottom-menu #gk-breadcrumb  .breadcrumbs li.pathway { color: #cb260a; }
#gk-bottom-menu #gk-breadcrumb  .breadcrumbs li a:hover { color: #000; }
#gk-bottom-menu #gk-breadcrumb  .breadcrumbs > ul { margin-left: 5px; background: transparent url('../images/breadcrumbs_icon.png') no-repeat right bottom; height: 21px; line-height: 21px; padding: 0 15px 0 8px; }
#gk-bottom-menu #gk-breadcrumb  .breadcrumbs > ul > li { float: left; width: auto; clear: none; line-height: 21px; }
/* standard breadcrumb */


See you around...