[1.7] Change main_menu position

dudekk · April 27, 2017

Hello,

I'm trying to move menu from the center of header a little lower. I can do it easily in Chrome Object Inspector but I don't know how to do in template. How I can change position of this module?

I don't see any option to move it in template file /themes/classic/modules/ps_mainmenu

How can I do it?

Before:

After:

theDoris · April 27, 2017

Just change it class in tpl file from:

menu col-lg-8 col-md-7 js-top-menu position-static hidden-sm-down

to

menu col-lg-12 col-md-12 js-top-menu position-static hidden-sm-down

dudekk · April 27, 2017

Already tried this, but it just widen the menu, I want it to be in a row below logo and search box

theDoris · April 27, 2017

In header.tpl file change also this:

to this:

Location is templates/_partials/header.tpl

tkang88 · September 25, 2017

Any update on this? i facing the same issue...

tkang88 · September 25, 2017

templates/_partials/header.tpl, i had change below...

{block name='header_top'}

</a>

</div>

{hook h='displayTop'}

</div>

</div>

{/block}

---------------------------------------------------------------------------------------

theme/classic/ps_mainmenu.tpl, i had change below...

{menu nodes=$menu.children}

</div>

After all changed, but no luck for this menu positioning... anyone can help?

tkang88 · September 26, 2017

I found the solution, It in the back office, Design>position> displayTop, then just drag seach bar to 1#, and main menu to 2#..

dinizhobby · January 27, 2018

On 9/26/2017 at 6:58 AM, tkang88 said:

I found the solution, It in the back office, Design>position> displayTop, then just drag seach bar to 1#, and main menu to 2#..

Expand

Hi bro

I am trying your solution but not working for me

Can you help me?

I did modification files: header.tpl and ps_mainmenu.tpl and Design >>> positions too

prestaowner20 · August 6, 2018

Hi anyone have a solution for this issue please? I tried everything but nothing is working :/ I have a bigger log on my shop and I want to have the menu and search bar centered with logo.

Could please anyone help me ?

lunaroja · August 20, 2018

On 8/17/2018 at 7:24 AM, tinygirl said:

W pozycjach modułów w DisplayTop odłączasz moduł Pasek szukania. Następnie edytujesz plik header.tpl w następujący sposób:

{block name='header_top'}
<div class="header-top">
<div class="container">
<div class="row">
<div class="col-md-8 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-4 hidden-sm-down">
{hook h='displaySearch'}
</div>
<div class="col-md-12 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>

{/block}

Then the search bar is next to the logotype, and the menu bar below them.

Expand

Works. Thank you

soumen · October 20, 2018

{block name='header_nav'}
<nav class="header-nav">
<div class="container">

<div class="hidden-lg-up text-xs-center mobile">
<button class="btn canvas-menu float-xs-left" data-toggle="offcanvas" type="button"><span class="material-icons">dehaze</span>
</button>
</div>
<div class="float-xs-left">
{hook h='displayNav1'}
</div>
{if class_exists('PtsthemePanel')}
<div class="float-xs-right">
{plugin module='ps_searchbar' hook='displayTop'}
</div>
{/if}
<div class="float-xs-right right-nav">
{hook h='displayNav2'}
</div>
</div>
</nav>
{/block}
{block name='header_top'}
<div class="header-top">
<div class="container">
<div class="float-xs-left">
<div class="{if Configuration::get('PTS_CP_LOGOTYPE') == 'logo-theme'}logo-theme{else}logo-store{/if}">
<a href="{$urls.base_url}" title="{$shop.name}">
<img class="logo img-responsive" src="{$shop.logo}" {if Configuration::get('PTS_CP_LOGOTYPE') == 'logo-theme'}hidden{/if} alt="{$shop.name}">
</a>
</div>
</div>
<div class="position-static float-xs-right">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
   <div id="_desktop_menu" class="ps-desktop-megamenu">
   {hook h="displayMainmenu"}
   </div>
</div>
</div>
{hook h='displayNavFullWidth'}
{/block}

what I have to change? please help me.

Dawg · January 29, 2020

Hi guys,

Sorry for bringing to life this old topic but I have a little problem and I don't know if you are also facing this.

First of all, the tinygirl's script is working for this problem, thank you a lot for that BUT

1. The categories stop showing after I move the menu location (see in pictures attached: the one with the logo, menu and search box in line, (before.jpg) when I put my mouse on "Shoes", it reveals the subcategories and in the other picture where the menu and search box appears under the logo (after.png), when I put my mouse on "Shoes" nothing happens).

2. After using tinygirl's script for bringing the menu under the logo, I got 2 search boxes (as you can see in the screenshots).

So my question is 'How can I move the menu under the logo but keep it full functional ~~and also keeping only one search box (the one in line with the menu looks ok)~~?' (check the L.E. below to solve the search box problem)

Thanks a lot guys!

L.E. I removed the top search bar in my screenshot by removing the extra-code in tinygirl's solution. To keep only one search box in line with the menu text, under the logo, use the following code:

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-8 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 class="col-md-12 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>
  
{/block}

Enjoy!

Edited January 29, 2020 by Dawg
Updating the 1/2 solution (see edit history)

[1.7] Change main_menu position

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in