Jump to content

Header not showing on mobile view only on home page


Recommended Posts

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

code in any page.png

code in home page.png

Edited by feho1 (see edit history)

Share this post


Link to post
Share on other sites

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.

 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?
  • Like 1

Share this post


Link to post
Share on other sites

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

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
 Share

×
×
  • Create New...

Important Information

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