Jump to content

Change the position of buttons on mobile view


Alvin

Recommended Posts

Hi, I installed a theme and want to change the position of the hamburger button and search button to the left; and the account and cart buttons to the right. How can I do that ? Below is part of the code from the header.tpl

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
        <div class="row">
          <div class="hidden-sm-down">
            <div class="col-md-4 col-xs-12">
              {hook h='displayNav1'}
            </div>
            <div class="right-nav">
                {hook h='displayNav2'}
            </div>
          </div>
          <div class="hidden-xl-up text-xs-center mobile">
            <div class="top-logo" id="_mobile_logo"></div>
            <div class="mobile-menu">
              <div class="float-xs-left" id="menu-icon">
                <span></span>
              </div>
              <div class="float-xs-left" id="mobile_search"></div>
              <div class="float-xs-right" id="_mobile_cart"></div>
              <div class="float-xs-right" id="_mobile_user_info"></div>
            </div>
          </div>
        </div>
    </div>
  </nav>
{/block}

 

Thanks heaps.

1.PNG

2.jpg

Link to comment
Share on other sites

That's doable with a piece custom css code. 

Here it's, put it to the \themes\yourthemename\assets\css\custom.css file. I guess it wold work, because of you didn't share your site url, so I can't check it.

.mobile-menu{text-align:center;}
.mobile-menu .float-xs-left, .mobile-menu .float-xs-right{float:left!important;float:right!important;display:inline-block;}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...