Jump to content

Is top Block menu no more responsive for mobiles?


Recommended Posts

Default theme

The top horizontal menu dissapears on mobiles and when the browser window is size is reduced. Is the top horizontal menu not responsive any more?

Please advise

how should get the top block menu to appear on mobiles again

 

I have enabled that option to view on mobiles and tabs and computer in configure module

 

Link to comment
Share on other sites

From what I can see there is no problem with the resizing of the blocktopmenu (information about call us, phone no, whatsapp, etc).

 

a ) You changed the css there. Letters are too big, and the block disappear when it is too big for the device.

b ) you are using some other modules (modal home) and back to top. Perhaps the problem you are having is coming from one of that modules. You should deinstall them and test, or disable them for mobile devices.

c ) for the top navigation bar you should control if it is disabled for mobile theme (go on module list and check the settings on the button edit/chevron down. Perhaps you disabled the module for mobile devices.

Edited by selectshop.at (see edit history)
Link to comment
Share on other sites

Block top menu has a problem with resizing...the details are not visible in a small sized device

I do not have any of those modules installed

the top horizontal menu was NOT disabled for mobile devices

 

Why is the block top menu and top horizontal menu not visible in mobile devices?

 

YES CSS has been changed- But I dont that that is the problem because the css was changed before 4 months and from last 2 weeks the top horizontal menu and top block menu are not visible in  mobile devices.

 

Please advise the next step to be taken.

Link to comment
Share on other sites

The following is my superfished-modified.css for top horizontal menu.Please advise if anything is wrong.

 




.sf-contener {

  clear: both;

  float: left;

  width: 100%; }

 

.sf-menu,

.sf-menu * {

  margin: 0;

  padding: 0;

  list-style: none; }

 

.sf-menu {

  position: relative;

  padding: 0;

  width: 100%;

  border-bottom: 3px solid #e9e9e9;

  background: #f6f6f6; }

  @media (max-width: 767px) {

    .sf-menu {

      display: none; } }

 

.sf-menu ul {

  position: absolute;

  top: -999em;

  background: #fff; }

  @media (max-width: 767px) {

    .sf-menu ul {

      position: relative; } }

 

.sf-menu ul li {

  width: 100%; }

 

.sf-menu li:hover {

  visibility: inherit;

  /* fixes IE7 'sticky bug' */ }

 

.sf-menu > li {

  float: left;

  border-right: 1px solid #d6d4d4;

  margin-bottom: -3px; }

  @media (max-width: 767px) {

    .sf-menu > li {

      float: none;

      position: relative;

      border-right: none; }

      .sf-menu > li span {

        position: absolute;

        right: 6px;

        top: 20px;

        width: 30px;

        height: 30px;

        z-index: 2; }

        .sf-menu > li span:after {

          font-family: "FontAwesome";

          content: "\f067";

          font-size: 26px; }

        .sf-menu > li span.active:after {

          content: "\f068"; } }

  .sf-menu > li > a {

    font: 600 16px/18px "Open Sans", sans-serif;

    text-transform: uppercase;

    color: #484848;

    display: block;

    padding: 17px 20px;

    border-bottom: 3px solid #e9e9e9; }

  .sf-menu > li.sfHover > a,

  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {

    background: #333;

    border-bottom-color: #666666;

    color: #fff; }

 

.sf-menu li li li a {

  display: inline-block;

  position: relative;

  color: #777777;

  font-size: 13px;

  line-height: 16px;

  font-weight: bold;

  padding-bottom: 10px; }

  .sf-menu li li li a:before {

    content: "\f105";

    display: inline-block;

    font-family: "FontAwesome";

    padding-right: 10px; }

  .sf-menu li li li a:hover {

    color: #333; }

 

.sf-menu li ul {

  display: none;

  left: 0;

  top: 59px;

  /* match top ul list item height */

  z-index: 99;

  padding: 12px 0px 18px 0px;

  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;

  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;

  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; }

  @media (max-width: 767px) {

    .sf-menu li ul {

      top: 0; } }

 

.sf-menu li li ul {

  position: static;

  display: block !important;

  opacity: 1 !important;

  background: none;

  -moz-box-shadow: transparent 0px 0px 0px;

  -webkit-box-shadow: transparent 0px 0px 0px;

  box-shadow: transparent 0px 0px 0px; }

 

.sf-menu li li li ul {

  padding: 0 0 0 20px; }

 

.sf-menu li li li ul {

  width: 220px; }

 

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

  top: -999em; }

 

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

  left: 200px;

  /* match ul width */

  top: 0; }

 

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

  top: -999em; }

 

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

  left: 200px;

  /* match ul width */

  top: 0; }

 

.sf-menu > li > ul {

  padding: 26px 30px 31px;

  width: 100%; }

  .sf-menu > li > ul > li > a {

    text-transform: uppercase;

    font: 600 16px/20px "Open Sans", sans-serif;

    color: #333; }

    .sf-menu > li > ul > li > a:hover {

      color: #515151; }

 

.sf-menu > li > ul > li {

  float: left;

  width: 20%;

  padding-right: 15px; }

  @media (max-width: 767px) {

    .sf-menu > li > ul > li {

      width: 50%; } }

  @media (max-width: 479px) {

    .sf-menu > li > ul > li {

      width: 100%;

      padding-bottom: 20px; } }

  @media (min-width: 768px) {

    .sf-menu > li > ul > li.first-in-line-lg {

      clear: left; } }

  @media (min-width: 480px) and (max-width: 767px) {

    .sf-menu > li > ul > li.first-in-line-xs {

      clear: left; } }

 

.sf-menu > li > ul > li.category-thumbnail {

  width: 100% !important;

  float: none;

  clear: both;

  overflow: hidden;

  padding-right: 0; }

  .sf-menu > li > ul > li.category-thumbnail > div {

    float: left;

    padding-left: 10px;

    width: 33.333%; }

    @media (max-width: 479px) {

      .sf-menu > li > ul > li.category-thumbnail > div {

        width: 100%;

        padding-left: 0;

        padding-top: 10px;

        text-align: center; } }

    .sf-menu > li > ul > li.category-thumbnail > div:first-child {

      padding-left: 0; }

    .sf-menu > li > ul > li.category-thumbnail > div img {

      max-width: 100%;

      display: block; }

 

.cat-title {

  display: none; }

  @media (max-width: 767px) {

    .cat-title {

      display: block;

      font: 600 18px/22px "Open Sans", sans-serif;

      text-transform: uppercase;

      color: #484848;

      display: block;

      padding: 17px 20px;

      border-bottom: 3px solid #e9e9e9;

      background: #f6f6f6;

      position: relative; }

      .cat-title:hover {

        background: #333;

        border-bottom-color: #666666;

        color: #fff; }

      .cat-title:after {

        display: block;

        font-family: "FontAwesome";

        content: "\f067";

        position: absolute;

        right: 15px;

        top: 18px;

        font-size: 26px; }

      .cat-title.active:after {

        content: "\f068"; } }

 

.sf-menu li.sf-search {

  border: none; }

  .sf-menu li.sf-search input {

    display: inline;

    padding: 0 13px;

    height: 30px;

    line-height: 30px;

    background: #fff;

    margin: 13px 10px 0 0;

    font-size: 13px;

    color: #9c9b9b;

    border: 1px solid #d6d4d4; }

 

#block_top_menu .category-thumbnail {

  clear: both;

  width: 100%;

  float: none; }

  #block_top_menu .category-thumbnail div {

    float: left;

    width: 33.33333%; }

    #block_top_menu .category-thumbnail div img {

      max-width: 100%; }

#block_top_menu li.category-thumbnail {

  padding-right: 0; }

 

/*# sourceMappingURL=superfish-modified.css.map */

Edited by Designinfo.in (see edit history)
Link to comment
Share on other sites

The problem is on the changes you made. Natively we have there:

<div id="block_top_menu" class="sf-contener clearfix col-lg-12">
<div class="cat-title active">Categories</div>
<ul class="sf-menu clearfix menu-content" style="display: block;">

On your source code there is another class.

<div class="sf-contener clearfix">
<ul class="sf-menu clearfix">
<li class="">
<span class="menu-mobile-grover"></span>
<a class="" title="Home" href="http://www.designinfo.in/">Home</a>
<ul class="submenu-container clearfix first-in-line-xs menu-mobile" style="">

The same error you are having on block_top_menu.

 

Use firebug (addon for FF or F12 on Chrome), for to develop and compare your code with one original Prestashop

Link to comment
Share on other sites

The problem is on the changes you made. Natively we have there:

<div id="block_top_menu" class="sf-contener clearfix col-lg-12">
<div class="cat-title active">Categories</div>
<ul class="sf-menu clearfix menu-content" style="display: block;">

On your source code there is another class.

<div class="sf-contener clearfix">
<ul class="sf-menu clearfix">
<li class="">
<span class="menu-mobile-grover"></span>
<a class="" title="Home" href="http://www.designinfo.in/">Home</a>
<ul class="submenu-container clearfix first-in-line-xs menu-mobile" style="">

The same error you are having on block_top_menu.

 

Use firebug (addon for FF or F12 on Chrome), for to develop and compare your code with one original Prestashop

I understand I have made blatant errors. However please help me by telling me in which file is the above code located. It is not in the superfish-modified.css

Thanks for your instant reply.

Link to comment
Share on other sites

×
×
  • Create New...