Moving mobile menu to left side

Closed

Public

Hans-Eirik Hanifl asked July 23, 2014

We are considering purchasing the JM SportsGear Magento theme for a project. Having worked with Joomlart themes in the past they are generally well put together and easy to work with.

That said I noticed the mobile menu icon docks to the right hand side and the off-canvas menu slides in from the right. This is a very unorthodox approach and would need to be moved to the left on our project to conform with the generally accepted standard navigation practices of left hand vertical navigation.

Would the moving of the mobile menu to the left be a major undertaking or is it merely changing of CSS?

I look forward to your response.

SportsGear

2 answers

Vote Up

Vote Down

Seoki Lee ⋅1510.00 $tone July 24, 2014

Public

To move the mobile menu to left side, please open file \skin\frontend\default\jm_sportsgear\css\off-canvas.css

At line 30, repalce this rules:

Code:

.off-canvas #off-canvas-nav{
   -webkit-backface-visibility: hidden;
    width: 250px;
    height: 100%;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow-y: auto;
    background: none;
    z-index: 1001;
    box-sizing: content-box;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    right: 0;  
 }

With:

Code:

.off-canvas #off-canvas-nav{
   -webkit-backface-visibility: hidden;
    width: 250px;
    height: 100%;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow-y: auto;
    background: none;
    z-index: 1001;
    box-sizing: content-box;
    -webkit-transform: translate3d(0%, 0, 0);
    -moz-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    left: -250px;
 }

At line 54, replace this rules:

Code:

.off-canvas #off-canvas-nav .jm-mainnav{
  background: none repeat scroll 0 0 #000000
  margin: 0;
  min-height: 100%;
  position: absolute;
  right: 0;
  text-align: left;
  top: 0;
  width: 100%;
 }

With:

Code:

.off-canvas #off-canvas-nav .jm-mainnav{
  background: none repeat scroll 0 0 #000000
  margin: 0;
  min-height: 100%;
  position: absolute;
  left: 0;
  text-align: left;
  top: 0;
  width: 100%;
 }

At line 136, replace this rules:

Code:

.off-canvas-enabled body #jm-wrapper {
   -webkit-transform: translate3d(-13.88889rem, 0, 0);
   -moz-transform: translate3d(-13.88889rem, 0, 0);
   -ms-transform: translate3d(-13.88889rem, 0, 0);
   -o-transform: translate3d(-13.88889rem, 0, 0);
   transform: translate3d(-13.88889rem, 0, 0); 
 }

With:

Code:

.off-canvas-enabled body #jm-wrapper {
   -webkit-transform: translate3d(250px, 0, 0);
   -moz-transform: translate3d(250px, 0, 0);
   -ms-transform: translate3d(250px, 0, 0);
   -o-transform: translate3d(250px, 0, 0);
   transform: translate3d(250px, 0, 0); 
 }

Hope this helps.

Vote Up

Vote Down