On upgrade from 4.5.8 to 4.6.2 CiviCRM menu disappears until scroll, then scrambled

Question

The issue: after upgrade the CiviCRM menu will not appear at the top over the Drupal menu. It does not appear at all unless I scroll down the page a short ways and then it appears on the upper left apparently without theming (see image).

I have now tried to upgrade several times and each time the same issue happens again. I have tried changing permissions, re-uploading a new set of 4.6.2 and following upgrade instructions carefully.

This site is basic and has no particular customizations... it is a shared hostgator account. I am running the latest Drupal 7 version and have upgraded CiviCRM at least a dozen times in the past with no issues. Perhaps I have some particular issue only on my setup, but wondering if anyone else is having a similar issue. Perhaps I'll need to wait until the next release and try again. Thanks.

Answer 1

I was able to finally figure this out (not why, but how to fix). It somehow had to do with the Zen sub-theme I was had created was not playing nice with version of CiviCRM past, I think, 4.5.8.

I downloaded another version of the Zen 7.x5.5 version sub-theme and re-built my theme and was able to upgrade successfully. Thank you, Michael, for leading me down the right path.

Answer 2

I know that CiviCRM 4.6.x and the Drupal core Garland theme are incompatible presently. The AJAX flipping between tabs on a given page, and bringing email address fields into edit mode are all busted in Garland theme. Perhaps something is wrong compatibility wise with your site's theme. Try switching the theme for a test user account to a different theme and see if that clears up the troubles.

Also did you remember to flush your CiviCRM template cache files after each time you upgrade? ALWAYS wise to flush the cache directory after each CiviCRM upgrade. Locate your civicrm caching directory and issue:

.../civicrm/templates_c/en_US$ sudo rm -rf %%*

I am thankful,

Michael

Answer 3

This is not a known bug in CiviCRM 4.6 and you can see it working correctly on the demo site.

I suggest you try these troubleshooting steps to figure out what's going wrong with your site.

Answer 4

I had the same issue and (mostly) resolved it by copying the CSS from my prior CiviCRM installation's navigation.css and adding it to my theme's custom.css file. It (mostly) works correctly now (I'm dealing with a Smarty error. I think that error is not related.).

I pre-tested whether this would work by viewing the wrong-displaying page/CiviCRM menu in Chrome, inspecting the various elements, and hand-copying correct css into it.

Following is the css I copied into my custom.css file:

html>body div.outerbox
{
  padding: 0 5px 5px 0;
  z-index:999999;
  font-size: 13px;
  margin-top:2px;
}
html>body div.outerbox div.shadowbox1
{
  position: absolute;
  right: 0;
  bottom: 5px;
  width: 5px;
  height: 100%;
  background: url(../i/myshadow.png) no-repeat right top;
}
html>body div.outerbox div.shadowbox2
{
  position: absolute;
  bottom: 0;
  right: 5px;
  height: 5px;
  width: 100%;
  background: url(../i/myshadow.png) left bottom;
}
html>body div.outerbox div.shadowbox3
{
  position: absolute;
  bottom: 0;
  right: 0;
  height: 5px;
  width: 5px;
  background: url(../i/myshadow.png) no-repeat right bottom;
}
html>body .innerbox
{
  margin: 0;
  z-index:999999;
  margin-left:10px;
}

#root-menu-div ul {
  border: 1px solid #000;
}
#root-menu-div li{
  white-space:nowrap;
  background-image: none;
  text-align: left;
}
* html #root-menu-div li{
  height: 1.5em; /* fixing ie6 problem */
}
#civicrm-menu,
#root-menu-div ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background:#5D5D5D;
  color: white;
  cursor: default;
  font-size: 12px;
  font-family: Tahoma, Verdana, Arial, Sans;
}

#civicrm-menu {
  position:absolute;
  top:0;
  left:0;
  background:#1B1B1B repeat-x;
  width:100%;
  height:27px;
  z-index:99999;
  overflow: hidden;
}

li.menu-separator.active{
  background-color: transparent;
}

.menu-ul li.active {
  background-color: #aaa;
}

#civicrm-menu .activetarget{
  background-color: #aaa;
}

#civicrm-menu li a, #root-menu-div li a {
  color:white;
  cursor:pointer;
  display:block;
  font-weight:normal;
  text-decoration:none;
}

* html div.menu-item {
  display: inline; /* fixes problem in ie6 */
}

li.menumain {
  float: left;
  padding: 3px 10px;
  background-image: none;
  border-right: 1px solid #5D5D5D;
  margin:0;
}

#root-menu-div .menu-ul li {
  margin: 0;
  padding: 0 20px 0 2px;
}

div.menu-item {
  padding: 1px 10px 1px 4px;
  height: auto;
}
img.menu-item-arrow{
  position: absolute;
  right: 4px;
  top: 8px;
}
li.menu-separator{
  border-bottom: 1px solid #000;
  font-size: 0; /* for ie */
  height: 0;
  line-height: 0; /* for ie */
  margin: 2px 0;
}
#civicrm-menu .crm-logo-sm {
  background: url('../i/item_sprites.png') no-repeat scroll -80px -16px;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align:middle;
}