By JAScarb on

Hi

Using Commerce Kickstart, there's a menu that changes for mobile devices. Where do I go to customise that?

Here's what I mean (I know it's a video, but it's only a minute long .. c'mon, you can do this ) http://www.youtube.com/watch?v=BkxVRJsabOw

I think it's entirely CSS & a media query, but I haven't found it yet.

Here, for instance, are all the CSS files that use 'max-width'

./modules/field_ui/field_ui.css
./modules/system/system.admin.css
./modules/color/color.css
./sites/all/themes/retro86/css/commerce-kickstart-theme-ie-lte-8.css
./sites/all/themes/retro86/css/retro-86-theme-ie-lte-8.css
./sites/all/themes/retro86/css/global.css
./profiles/commerce_kickstart/modules/contrib/views/css/views-admin.ctools.css
./profiles/commerce_kickstart/modules/contrib/views/css/views-admin.theme.css
./profiles/commerce_kickstart/modules/contrib/commerce_kiala/theme/commerce_kiala.css
./profiles/commerce_kickstart/modules/contrib/ctools/css/stylizer.css
./profiles/commerce_kickstart/modules/contrib/colorbox/styles/stockholmsyndrome/colorbox_style.css
./profiles/commerce_kickstart/modules/contrib/colorbox/styles/default/colorbox_style.css
./profiles/commerce_kickstart/modules/contrib/colorbox/styles/plain/colorbox_style.css
./profiles/commerce_kickstart/modules/contrib/commerce_backoffice/theme/commerce-backoffice.css
./profiles/commerce_kickstart/modules/commerce_kickstart/commerce_kickstart_help/help/commerce_kickstart_help.css
./profiles/commerce_kickstart/modules/commerce_kickstart/commerce_kickstart_dfp/theme/commerce_kickstart_dfp.css
./profiles/commerce_kickstart/themes/omega_kickstart/css/ie-lte-8-rtl.css
./profiles/commerce_kickstart/themes/omega_kickstart/css/omega-kickstart-alpha-default.css
./profiles/commerce_kickstart/themes/omega_kickstart/css/ie-lte-8.css
./profiles/commerce_kickstart/themes/omega_kickstart/css/global.css
./profiles/commerce_kickstart/themes/omega_kickstart/css/ie-lte-7-rtl.css
./profiles/commerce_kickstart/themes/commerce_kickstart_admin/css/commerce_kickstart_admin.css
./profiles/commerce_kickstart/themes/commerce_kickstart_theme/css/commerce-kickstart-theme-ie-lte-8.css
./profiles/commerce_kickstart/libraries/colorbox/example2/colorbox.css
./profiles/commerce_kickstart/libraries/colorbox/example1/colorbox.css
./profiles/commerce_kickstart/libraries/colorbox/example5/colorbox.css
./profiles/commerce_kickstart/libraries/colorbox/example4/colorbox.css
./profiles/commerce_kickstart/libraries/colorbox/example3/colorbox.css
./profiles/commerce_kickstart/libraries/jquery.bxslider/jquery.bxslider.css

So, y'know, save me from looking through all of them and then realising I should have searched min-width. Gizza pointer. IS it CSS, or am I entirely in the wrong place? All I want to do is change the colours!

Cheers
J

⋅ Categories: Drupal 7.x

Comments

vm’s picture

vm commented

firebug or chromes dev tools will aid in finding the exact CSS in use and from what file.

make the menu in question appear by shrinking the window
inspect the menu element using firebug or chromes dev tools

JAScarb’s picture

JAScarb commented

I've been using Chrome tools .. haven't found the magic line yet ..

vm’s picture

vm commented

based on the clue provided by bojanz below

https://github.com/lukaszfiszer/selectnav.js#css

bojanz’s picture

bojanz commented

We use https://github.com/lukaszfiszer/selectnav.js for that.

JAScarb’s picture

JAScarb commented

Ah, a chink of light, thanks y'both, I'll report back

JAScarb’s picture

JAScarb commented

OK, working on that .. (I did post a different comment, but it was rubbish so I'm removing it)

JAScarb’s picture

JAScarb commented

OK, many hours later I'm not a huge way forward.

Yes, selectnav is around, but the menu it appears to apply to hasn't got id="nav" around it, and nor does there seem to be a call selectnav('nav') anywhere.

I think I want to make another child theme, go through my changes and try to spot at which point I broke it ..

JAScarb’s picture

JAScarb commented

OK, my problem is that the mobile menu works in a vanilla Commerce Kickstart, but doesn't in my customised installation even though I haven't done much customising.

There wasn't a <ul id="nav"> in my page, so I didn't know what classes, ids and so on were required, so I stripped the working page right down to only (well, nearly) the stuff the menu needed. Here's my Drupal 7 Kickstart stripped down menu, in case anyone else is enjoying my level of ignorance and finds it useful.

Now all I have to do is work out how to get those bits into my version. I now think all it needs is to be contained in:

<div class="grid-24 region-menu">
<nav class="navigation">

...

</nav>
</div>

.. so I'm off to work out how to do that.

If you know the best way for me to do that, yell.

Cheers
J

JAScarb’s picture

JAScarb commented

To get nav and the region menu classes into the code, I had to change region--menu.tpl.php to:

<div<?php print $attributes; ?>>
  <div<?php print $content_attributes; ?>>
    <nav class="navigation">
      <div class="primary-menu inline">
				<?php print $content;?>
      </div>
    </nav>
  </div>
</div>

Just for future seekers.

It works now (hurrah)