CiviCRM Community Forums (archive)

Has anyone out there given any thought to making the CiviCRM navigation bar and the various Drupal admin menu/D7 Toolbar solutions work together? I mean, they don't conflict - the Civi navigator just overlays the others until you navigate out of the Civi section of the site. But has anyone tried to keep them both in play, when necessary, or else determined that that approach isn't useful after all?

I was just working on this yesterday and may have a d7 solution.
I added these styles to the sites/all/modules/civicrm/css/extras.css file:

.toolbar #civicrm-menu {
  height: 32px;
  line-height: 27px;
  margin-top: 0px;
  min-width:100%;
  padding-left:8em;
  position:relative;
}
/*css3*/
.toolbar #civicrm-menu {
  -moz-box-shadow: 0 0 8px #1B1B1B;
  -webkit-box-shadow: 0 0 8px #1B1B1B;
  box-shadow: 0 0 8px #1B1B1B;
}
.toolbar #civicrm-menu:before {
  content:'CiviCRM Menu: ';
  left:1em;
  position:absolute;
}

We're using the Seven theme with the Toolbar module enabled.
You'll notice above that the #civicrm-menu div is only acted on if the class .toolbar exists. So if you don't have the toolbar module enabled it shouldn't affect your styles.

The second set of declarations (/*css3*/ .toolbar #civicrm-menu) are just fluff (but I like that shadow) and were separated from the first for compatibility. Since box-shadow is CSS3 older browsers may consider these an error and stop processing styles for that div after the 'error'.

The 3rd set of declarations (.toolbar #civicrm-menu:before) prepends the menu with the text: "CiviCRM Menu: " so the user knows why there are multiple menus.

I've attached two screenshots to demonstrate how it looks with and with out the shortcuts menu open.

So far I've tested it on Mac in FF4, Opera 10, Safari 5 and Chrome 10.

I did a few additional tweaks, for drupal 'seven', and the admin_menu module. See attachment for results. Most notably, the civicrm menu doesnt span the whole 100% - it reveals the drupal menu on the left and right hand. Therefore, the home icon stays at the left hand, and there is a switch between drupal / civicrm next to it, which stays both in drupal and in civi. The search bar is on the right hand side. At the outer right, there are the drupal 'login' items and the shortcuts foldout showing through.

 It does require tweaking your menus on both sides of the installation.

html body.page-civicrm.admin-menu { margin-top:0!important; }
html body.page-civicrm #branding { border-top:30px solid black; }
#civicrm-menu {
height: 30px; left:50px; right:200px; width:auto;
}
li.menumain { padding 3px 10px; }
#civicrm-menu li.menu-separator { margin:0;}
#civicrm-menu .crm-Drupal {}
#civicrm-menu .crm-CiviCRM a { background-color: #999; padding: 0 15px; border-radius: 15px; }
#civicrm-menu #menu-logout { display:none; }
#civicrm-menu li#crm-qsearch {
float:right; margin-right:2em;
margin-top:5px; border-right:0;
}
#civicrm-menu #crm-qsearch input {
width:178px!important;
}
.ac_results { z-index:999999; } /* seriously .. */

/*
i'm hiding the 'home' item because it is
ridiculous. added 'civicrm' and 'drupal' items myself
note, you cant (shouldnt) delete the home menu item,
it will break the menu.

*/
ul#civicrm-menu li.crm-link-home {
display:none;
}

Sorry if my post was unclear. The css is added (not changed) in a file called

[your_drupal_installation]/sites/all/modules/civicrm/css/extras.css
Yes, you will need a ftp client or similar to download/edit/upload that file.

To avoid the problem you're having, it may be good enough to increase civicrm's menu height. You don't need all the fancy I built in.

*-pike

So I did this again, now for drupal 7.31 with adminimal and th adminimal menu, and civi 4.4.6.

/*
civicrm menu tweak for
adminimal, adminimal-menu
and drupal 7.31

for optimal results, disable the
drupal overlay module.

pike*201408

*/

/*
hilite the drupal civicrm menu item
while civi is active.
*/
body.page-civicrm #admin-menu li.civicrm a {
background-color: #0074bd;
color: #fff;
padding-bottom: 1em;
margin-bottom: -1em;
}

body.page-civicrm.adminimal-menu div#admin-menu {
border-bottom:1px solid #0074bd;
}

/*
shift the civi menu down below the drupal menu
*/
#civicrm-menu {
top: 29px!important;
background: #0074bd repeat-x; /* #4d8f46 */
z-index:50;
}

/*
hide the logout button, drupal has that
*/
#civicrm-menu #menu-logout {
display:none;
}

/*
hide the home menu dropdown. instead,
create a custom 'dashboard' menu item
*/
#civicrm-menu li.menumain.crm-link-home {
display:none;
}
#civicrm-menu li#crm-qsearch.menumain.crm-link-home {
display:list-item;
}

/* improve the search bar and print icon */
#civicrm-menu #crm-qsearch input {
font-size: 1.1em;
margin-top: 2px;
}

#crm-container div#printer-friendly {
margin-top:-4em;
}

In civi 4.4.6, add this to a (new) file, eg sites/all/modules/civicrm/css/drupal-override.css, and specifiy that file as 'extra' css using the adminintration menu / resource urls (civicrm/admin/setting/url)

Hey there,

This is really nice - I wonder if we could include it in the standard civicrm install (maybe as an option?)

I suspect here would be a good place to add an option: https://github.com/civicrm/civicrm-drupal/blob/7.x-master/modules/civicrmtheme/civicrmtheme.module to turn that extra css on or off.

Might be easier than patching it each time - just a thought

agree that A-Z ing the menu items would help avoid the 'bouncing eyeball syndrome' as I run my eye up and down to find something

thnking of which, i find that happens a lot on 'Actions" (veering well off topic sorry). E.g. we have (in the case of Groups)

Add Contacts to Group
New Smart Group
Remove Contacts from Group

Would others find it easier if these were 'grouped' and hence 'prefaced' with the feature in question. I think my brain is better tuned to the 'main purpose' eg Activities, Group, Tags than whether it will be Add, Record, Send, Schedule eg

Activities: Record Activity for Contacts

Groups: Add Contacts
Groups: New Smart Group
Groups: Remove Contacts

Mailing: Email Contacts
Mailing: Schedule/Send Bulk Mailing

Tags: add tags
Tags: remove tags

etc??

As part of its UI Standards, Drupal is explicit in how admin menus are structured. IMO the right approach would be to
define the structure first, then rearrange to suit - rather than doing an ad-hoc cleanup which might then get back into disarray over time.

---

Pete - we worked with an organisation recently that ran testers through a review.

"Your task is to _______. Under which top-level menu would you look first?"

And so forth. It's only using one piece of information (user expectation) but it might help understand what peoples expectations are. (Note that familiar users and new users are different target groups. For adoption CiviCRM needs to consider especially new users, even though familiar users will likely have some objection to any changes proposed.)