Is top Block menu no more responsive for mobiles?

Designinfo.in · October 5, 2015

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

selectshop.at · October 5, 2015

Yes, the navigation for mobile devices is another.... It was never the same as for desktop versions.

Ask you can see the navigation bar has another view, and of course it is responsive....

Edited October 5, 2015 by selectshop.at (see edit history)

Designinfo.in · October 6, 2015

This is not visible on my website when the size is reduced.

I cannot see the Menu bar visible in mobiles and tabs.

It seems the top horizontal menu is not responsive on my website and disappears when the screenn size is reduced.

Please advise

selectshop.at · October 6, 2015

URL of your site ? ASny changes made on css or template files.

Designinfo.in · October 7, 2015

www.designinfo.in

no changes made

selectshop.at · October 7, 2015

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 October 7, 2015 by selectshop.at (see edit history)

Designinfo.in · October 7, 2015

Thank you for your reply . I will make the changes and revert back here. Did not expect such a detailed analysis . Thanks a lot - I appreciate your efforts.

Designinfo.in · October 7, 2015

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.

Designinfo.in · October 7, 2015

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 October 7, 2015 by Designinfo.in (see edit history)

Designinfo.in · October 7, 2015

The text size has been reduced however yet the top horizontal menu is not visible in mobiles

Please advise next step

Edited October 7, 2015 by Designinfo.in (see edit history)

selectshop.at · October 8, 2015

Is the module activated for mobile ? Did you activated the mobile theme at all ? Tab "preferences -> themes -> tab mobile". Smarty cache cleared, after your changes, new settings ?

Edited October 8, 2015 by selectshop.at (see edit history)

selectshop.at · October 8, 2015

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

Designinfo.in · October 8, 2015

Is the module activated for mobile ? Did you activated the mobile theme at all ? Tab "preferences -> themes -> tab mobile". Smarty cache cleared, after your changes, new settings ?

The theme was activated for smartphones from day one as it is set for in default

Designinfo.in · October 8, 2015

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.

Is top Block menu no more responsive for mobiles?

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

Link to comment

Share on other sites

Link to comment

Share on other sites