Header not showing on mobile view only on home page

[feho1]

Hi, i was developing theme from scratch using classic theme as base from prestashop github repository.
Everything was fine until i started designing header for mobile view.
I was designing it and then i realized that in my home page the content of header is not loading like in other pages, i have attached the code from chrome devtool , when i am in home page the header , logo, the top menu, icons are not loaded. when i am in any other page it gets loaded.
 

header.tpl:

{block name='header_banner'}
  <div class="header-banner">
    {hook h='displayBanner'}
  </div>
{/block}

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container desktop">
      <div class="row">
        <div class="col-md hidden-sm-down" id="menu-icon1"
             onclick="opennavigation()" style="float: left;">
          <i class="material-icons d-inline menu-icon1-i"></i>
        </div>

        <div id="mySidebar" class="sidebar hidden-sm-down">
          <div class="col-md hidden-lg-down" id="menu-icon2"
               onclick="opennavigation()" style="float: left;">
            <i class="material-icons d-inline menu-icon2-i">clear</i>
          </div>
          {hook h='displayTop'}
        </div>
        <div class="hidden-sm-down" id="bar" onclick="opennavigation()"></div>


        <div class="col-lg-4 col-lg-3 col-lg-2 col-md-10 col-sm-5 offset-md-0 offset-sm-0 offset-lg-0 hidden-sm-down"
             id="_desktop_logo">
          <a href="{$urls.base_url}">
            <svg >
               {* svg goes here *}
            </svg>
          </a>
        </div>

        <div id="right-nav1" class="col right-nav hidden-md-down">
          {hook h='displayNav1'}
 
          {hook h='displayNav2'}
        </div>

        <div id="right-nav2" class="col right-nav hidden-sm-down">
          {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"></i>
        </div>
        <div class="float-xs-right" id="_mobile_cart"></div>
        <div class="top-logo" id="_mobile_logo"></div>
        <div class="clearfix"></div>
      </div>
    </div>
    </div>
    <div class="hidden-xl-up" id="_mobile_search">
      {hook h='displaySearch'}
    </div>
  </nav>

{/block}

{block name='header_top'}
  <div class="container">
    <div class="header-top">
      <div class="row">
        <div class="col-md-12 col-sm-12  hidden-sm-up">
          {hook h='displayTop'}
          <div class="clearfix"></div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-xl-up " style="display:none;">
        <div class="js-top-menu-bottom " style="display: flex; margin: 0 auto;">
          <div id="_mobile_user_info"></div>
          <div id="_mobile_contact_link"></div>
        </div>
        <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>
      </div>
    </div>
  </div>
{/block}

Weird part is in firefox it works, but on chromium based browsers it does not.
ps: I am developing locally so i cant provide link to website

any suggestions?

 

Edit: Realized i did not upload the pictures

Edited September 1, 2020 by feho1 (see edit history)

[Jeff A]

I think you are looking too far down the tree? Start with determining which layout is being used... page.tpl or index.tpl etc?

IMHO the PrestaShop Classic templates are not great at self-documenting. You can (should?) add comments like <!-- this is index.tpl --> to work out which template path / inheritance is being used.

 

[feho1]

35 minutes ago, Jeff A said:

I think you are looking too far down the tree? Start with determining which layout is being used... page.tpl or index.tpl etc?

IMHO the PrestaShop Classic templates are not great at self-documenting. You can (should?) add comments like <!-- this is index.tpl --> to work out which template path / inheritance is being used.

 

Thank you very much for your answer.
I did like you said and found that it is using page.tpl 
 

{extends file=$layout}

{block name='content'}

  <section id="main">
    {block name='page_header_container'}
      {block name='page_title' hide}
        <header class="page-header">
          <h1>{$smarty.block.child}</h1>
        </header>
      {/block}
    {/block}

    {block name='page_content_container'}
      <section id="content" class="page-content card card-block">
        {block name='page_content_top'}{/block}
        {block name='page_content'}
          <!-- Page content -->
        {/block}
      </section>
    {/block}

    {block name='page_footer_container'}
      <footer class="page-footer">
        {block name='page_footer'}
          <!-- Footer content -->
        {/block}
      </footer>
    {/block}

  </section>

{/block}

I dont see any header in here. 
I will try to find solution but any help is welcomed

[Jeff A]

note that this inherits from $layout - so see if you can track down which $layout is being used...

[feho1]

1 minute ago, Jeff A said:

note that this inherits from $layout - so see if you can track down which $layout is being used...

Yeah that is what i was trying to do but i dont see any layout.tpl or anywhere that is $layout is defined, i am trying to find in the prestashop but there is only in admin/themes folders

[Jeff A]

looking at the pics - your template doesn't contain any content in the #_mobile_logo - which indicates that the content is being set using either CSS or JS.

1. If you have changed the id - e.g. by adding _ etc. then the CSS/JS may not be finding the element to add content. 
2. Alternately, the specific CSS or JS may not be being included on the platform where it is not showing?

[feho1]

3 minutes ago, Jeff A said:

looking at the pics - your template doesn't contain any content in the #_mobile_logo - which indicates that the content is being set using either CSS or JS.

1. If you have changed the id - e.g. by adding _ etc. then the CSS/JS may not be finding the element to add content. 
   
2. Alternately, the specific CSS or JS may not be being included on the platform where it is not showing?

1. If you have changed the id - e.g. by adding _ etc. then the CSS/JS may not be finding the element to add content. 
   that is what i suspected at first and reverted everything back even changed my theme to default one that we are using and still cant see the header on home page
2. Alternately, the specific CSS or JS may not be being included on the platform where it is not showing?
   yeah but where and how this is happening cant figure out, i believe it is js since the content is not even there, if it was css there would be some content but display none or something like that would apply to that content
   I will keep looking into it

[metalines]

Hi,

 

Did anyone figure this out?

_mobile_cart, _mobile_user_info & _mobile_logo all empty on page load. Issue only on index.

If you resize the page, javascript fires to move modules from _desktop to _mobile which corrects the problem.

It seems that there is javascript that fires on page load to move modules from _desktop to _mobile if the page width is < X. This script is working on page load on all pages but for some reason it is not firing on the home page. 

 

Hope someone knows why

 

Mike

[Willow7]

On 2/28/2023 at 3:47 PM, metalines said:

Hi,

 

Did anyone figure this out?

_mobile_cart, _mobile_user_info & _mobile_logo all empty on page load. Issue only on index.

If you resize the page, javascript fires to move modules from _desktop to _mobile which corrects the problem.

It seems that there is javascript that fires on page load to move modules from _desktop to _mobile if the page width is < X. This script is working on page load on all pages but for some reason it is not firing on the home page. 

 

Hope someone knows why

 

Mike

I have a same problem. Please, did you find solution? 

[DeViL_MiKKi]

On 2/28/2023 at 4:47 PM, metalines said:

Hi,

 

Did anyone figure this out?

_mobile_cart, _mobile_user_info & _mobile_logo all empty on page load. Issue only on index.

If you resize the page, javascript fires to move modules from _desktop to _mobile which corrects the problem.

It seems that there is javascript that fires on page load to move modules from _desktop to _mobile if the page width is < X. This script is working on page load on all pages but for some reason it is not firing on the home page. 

 

Hope someone knows why

 

Mike

 

It's work if you use hook

Quote

{hook h='HookName'}

Quote

{renderLogo}

etc...