Breadcrumb module position

Hello,
I would like to change the position of breadcrumb on my web, but I encounter a problem. In the first picture you can see the breadcrumb module on default position and the place where I want to relocate the module.

And this is the layout which I get when I try to change module position to highlights for example.

So as you can see the layout is broken and what I want is the same layout as it is in default position, but the row above.
This is my website from image examples. http://fvu.aku.sk/studium/akreditovane- ... udium.html
Thanks for help.

The reasin is css that is designed to work in breadcrumbs module position. If you want to have same styling in any other module position, you need to take this css:

Code: Select all

/* standard breadcrumb */
#gkBreadcrumb {   
   border-bottom: 1px solid #E5E5E5;
   border-top: 1px solid #E5E5E5;
    padding: 20px 32px;
}
#gkBreadcrumb:first-child {
   border-top: none;
}
#gkBreadcrumb .breadcrumbs {
   float: left;
   color: #999;
}
#gkBreadcrumb .breadcrumbs li.separator {
   padding: 0 10px!important;
   width: 6px;
}
#gkBreadcrumb .breadcrumbs li.separator i {
   color: #eb1e00;
   font-size: 4px;
   line-height: 1.6;
   position: relative;
   top: -3px;
}
#gkBreadcrumb .breadcrumbs > ul > li {
   float: left;
   font-size: 13px;
   font-weight: 500;
   line-height: 1
}
#gkBreadcrumb .breadcrumbs > ul > li a { font-weight: normal }


put it in override.css and change #gkBreadcrumb to correct module id.

It doesnt work correctly. I changed module ID to gkHighlights and this is what I got.

The main problem is the empty row below breadcrumbs and broken line and wrong color of li.separator is also undesired.

Please change this declaration in override.css:

Code: Select all

#gkHighlights {   
   border-bottom: 1px solid #E5E5E5;
   border-top: 1px solid #E5E5E5;
   padding: 20px 32px;
   width:  60%!important;
}


to:

Code: Select all

#gkHighlights {
  border-top: 1px solid #E5E5E5;
  padding: 20px 32px;
  width: 60%!important;
}


Much better, but top line was doubled, so I commented out

Code: Select all

border-top: 1px solid #E5E5E5;

and it corrected doubled line.
But this is still problem with color of "li.separator" - http://fvu.aku.sk/studium/akreditovane- ... udium.html
As you see on the page, it has different color (red) than selected menu item (orange).

Please change:

Code: Select all

#gkHighlights .breadcrumbs li.separator i {
  color: #eb1e00;
  font-size: 4px;
  line-height: 1.6;
  position: relative;
  top: -3px;
}


to:

Code: Select all

#gkHighlights .breadcrumbs li.separator i {
  color: #ff8000;
  font-size: 4px;
  line-height: 1.6;
  position: relative;
  top: -3px;
}