Align Menu on the Right

I actually have a set of theme settings that do this, but they are not in any of the themes as yet - I know its rather complicated to work with the responsiveness of the themes and requires quite a bit of CSS juggling in media queries to make it work properly.

If I were to take a patch for this it would have to be configurable, as in a theme setting, and has to have a sensible default for each breakpoint, whether that means being center aligned in small screens or whatever etc.

I am happy to share my code with you if you want to leverage it, its just basic form stuff and a bit of CSS.

Actually, I totally forgot about this, but this setting is in Pixture Reloaded, lol.

Here it is, slightly modified to work with Sky:

Form:

This is going to slot in around line 567 in Sky's theme-settings.php file. The new settings will be under "Menu bullets" in Skys Appearance settings UI, so you might want to change the name of that vertical tab.

  $form['at']['menu_styles']['mbp'] = array(
    '#type' => 'fieldset',
    '#title' => t('Menu Bar Alignment'),
    '#description' => t('<h3>Menu Bar Alignment</h3><p>Position the Menu Bar left, center or right. This will position any menu (Superfish included) placed in the Menu Bar region.</p>'),
  );
  $form['at']['menu_styles']['mbp']['menu_bar_position'] = array(
    '#type' => 'radios',
    '#title' => t('Set the position of the Menu bar'),
    '#default_value' => theme_get_setting('menu_bar_position'),
    '#options' => array(
      'mbp-l' => t('Left (default)'),
      'mbp-c' => t('Center'),
      'mbp-r' => t('Right'),
    ),
  );

Body class:

As per most settings this uses a body class. in Sky's template.php, around line 32 you'll find the $settings array(), add one item to that array, being the theme setting: 'menu_bar_position',

Default setting:

Now you can skip this but if you want to migrate your site you should add the default setting to the info file:

settings[menu_bar_position] = 'mbp-l'

CSS:

This can go anywhere, probably at the bottom of sky.settings.style.css is a good place.

/* Main menu position - left is default */
/* Center */
.mbp-c #menu-bar .menu-wrapper {
  display: table;
  margin: 0 auto;
  text-align: center;
}
.mbp-c #menu-bar .menu-wrapper ul {
  text-align: left;
}
.mbp-c #menu-bar .menu-wrapper li,
.mbp-c #menu-bar .menu-wrapper .menu li {
  margin-left: 0.3em;
  margin-right: 0.3em;
}

/* Right */
.mbp-r #menu-bar .menu-wrapper {
  float: right;
}
.mbp-r #menu-bar .menu-wrapper li,
.mbp-r #menu-bar .menu-wrapper .menu li {
  margin-left: 0.6em;
  margin-right: 0;
}

/* IE6/7 */
.ie6-7 .mbp-c #menu-bar .menu-wrapper  ul {
	float: left;
	position: relative;
	left: 50%;
}
.ie6-7 .mbp-c #menu-bar .menu-wrapper  .sf-menu ul li {
	left: 0;
}
.ie6-7 .mbp-c #menu-bar .menu-wrapper  .sf-menu li {
	left: -50%;
}

And the media query, forgot about it, looks like in Pixture reloaded I only bother pushing something at IE6/7 for this, which works since these themes use respond.js

@media only screen and (min-width:320px) and (max-width:480px) {
  .ie6-7 .mbp-c #menu-bar .menu-wrapper  ul,
  .ie6-7 .mbp-c #menu-bar .menu-wrapper  .sf-menu li {
    left: auto;
  }
}

Probably, the basic idea is that they should stack and stretch to 100% the width, so there is probably some CSS in PR that does that already that I missed.

If you can clean up that iPhone view, get them to stretch, probably a float none, display block width 100% sort of thing etc, well that would be really grand. I am so flat out trying to get 7.x-3.x in alpha ready state.

Thanks a lot, I have committed with attribution!