Edit History

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

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 pictires

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?