どのようなデザイン(html)になっているのか分からない為、
どういった対応が必要なのかの回答は難しいのですが
デフォルトの挙動は以下の通りです。

・スマホではハンバーガーメニューが表示される
※（レスポンシブWEBデザインの為、PCでブラウザの幅を縮めた表示とスマホの表示はイコール）
・ハンバーガーメニューにはトップカテゴリのみ表示される

＞style.cssに以下の記述をしたところPCでのブラウザで画面を縮小するとハンバーガーメニューが表示されるようになりましたが、スマホ側では表示されません。
基本、スマホとPCでブラウザの幅を縮めた表示は同じものになるはずですが
テンプレートを分離するようなカスタマイズを行われていますか？

＞（また、PC側のハンバーガーメニューをクリックすると画面がグレーの半透明になりメニュー内容の表示はされない状態です）
画面全体がグレー半透明の表示になる場合は
htmlの<div>タグの構造が崩れていると上記のような現象が起きる事があります。
またメニューの内容はページのロード時に
htmlソース内のclass="drawer_block"が指定された要素の子要素を
<div id="drawer" class="drawer sp"></div>にコピーしているのですが
class="drawer_block"が指定された要素は存在していますか？
また<script>の中に上記コピーを行う以下の記述はありますか？
$('#drawer').append($('.drawer_block').clone(true).children());

多分、デザインテンプレートをカスタマイズした際に
必要な記述を改変しているのではないかと思います。

----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
■EC-CUBE3マニュアル
■blog