Jump to content

Hide navigation bar in mobile version


Recommended Posts

First of all sorry for my bad english, I wanted the search bar in the mobile version was hidden and only appear with the side menu, with the inspect browser element I can change it, but I do not know what file it would be. Putting all the <div class: "row"> indicated in the set immediately after it would be perfect, but I do not know in what file I have to modify it.

Thanks in advance.

 

image.png.1701cd117df8680bcd2112d4d4fea0e3.png

Share this post


Link to post
Share on other sites
6 hours ago, Nishith said:

HI...
your file locate in

"themes\your_themes\templates\_partials\header.tpl"

Thanks

Hi, when I made the changes it looks good on the mobile theme but it has hidden the logo and the menu on the computer theme, how can I change it only in the computer version?

 

image.thumb.png.ac0c966e1b0f6b93da02a1dc43e3a68f.png

Share this post


Link to post
Share on other sites
4 hours ago, Nishith said:

hi...
not hide all row div class
put "hidden-sm-down" class in this div '<div class="col-md-10 col-sm-12 position-static">'.
See the image

Thanks

Capture.PNG

When I do that, the search bar disappears in the mobile version, and it does not appear when I open the side menu. How can I make it appear with the side menu?

Also disappears the entire menu and the search bar in the computer version

 

Edited by Pelleque (see edit history)

Share this post


Link to post
Share on other sites
{block name='header_banner'}
  <div class="header-banner">
    {hook h='displayBanner'}
  </div>
{/block}

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
      <div class="row">
        <div class="hidden-sm-down">
          <div class="col-md-5 col-xs-12">
            {hook h='displayNav1'}
          </div>
          <div class="col-md-7 right-nav">
              {hook h='displayNav2'}
          </div>
        </div>
        <div class="hidden-md-up text-sm-center mobile">
          <div class="float-xs-left" id="menu-icon">
            <i class="material-icons d-inline">&#xE5D2;</i>
          </div>
          <div class="float-xs-right" id="_mobile_cart"></div>
          <div class="float-xs-right" id="_mobile_user_info"></div>
          <div class="top-logo" id="_mobile_logo"></div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </nav>
{/block}

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-2 hidden-sm-down" id="_desktop_logo">
            {if $page.page_name == 'index'}
              <h1>
                <a href="{$urls.base_url}">
                  <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
                </a>
              </h1>
            {else}
                <a href="{$urls.base_url}">
                  <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
                </a>
            {/if}
        </div>
        <div class="col-md-10 col-sm-12 position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

This is the original header.tpl

Edited by Pelleque (see edit history)

Share this post


Link to post
Share on other sites
On 3/26/2019 at 5:58 AM, Nishith said:

hi...
not hide all row div class
put "hidden-sm-down" class in this div '<div class="col-md-10 col-sm-12 position-static">'.
See the image

Thanks

Capture.PNG

I haven't yet managed to solve it, any ideas?

Share this post


Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More