[SOLVED] Top menu do'nt expand on iPad in Portrait

[OYLSB ~ Leif B.]

I have looked all most every inch through in Chrome console, to find the bug.

I also have searched google empty for informations regarding this problem.

 

I can't find any error, so I hope there's someone here there could help me.

 

The site is: https://shop.hjortsmykker.dk and the problem occurs only when the screen width = 768.

I have tried to tweak some .css and some .js, but I ending up restore old values.

 

Hope for help

Regards, Leif B.

Edited September 13, 2016 by OYLSB ~ Leif B. (see edit history)

[Knowband Plugins]

Please refer to the attached screenshot for fixing the design glitch.

 

You might need to disable the 'Smart Cache for CSS' setting from the Performance tab to view the path of file responsible for this CSS.

 

[OYLSB ~ Leif B.]

 

Please refer to the attached screenshot for fixing the design glitch.

 

You might need to disable the 'Smart Cache for CSS' setting from the Performance tab to view the path of file responsible for this CSS.

 

Thank you for taking the time.

I tried to disable:

@media (max-width: 768px)
.sf-menu {
    display: none;
}

But then the menu expanded and could not collapse :-( 

It's like that the click event on the menu, are conflicting, when the screen width is 768px.

 

/Leif B.

[OYLSB ~ Leif B.]

Finally I got it to work!!

 

I changed \themes\[themename]\js\modules\blocktopmenu\js\blocktopmenu.js

// check resolution
function responsiveMenu()
{
   if ($(document).width() <= 767 && responsiveflagMenu == false)
	{
		menuChange('enable');
		responsiveflagMenu = true;
	}
	else if ($(document).width() >= 768)
	{
		menuChange('disable');
		responsiveflagMenu = false;
	}
}

to

// check resolution
function responsiveMenu()
{
   if ($(document).width() <= 768 && responsiveflagMenu == false)
	{
		menuChange('enable');
		responsiveflagMenu = true;
	}
	else if ($(document).width() >= 769)
	{
		menuChange('disable');
		responsiveflagMenu = false;
	}
}

[gabrielio]

Thanks for posting this. It was easier for me to find what file i had to modify. If you want to expand this to higher resolution than you can modify(in blocktopmenu.js) the "767" and "768" to let`s say "991" and "992"

 

Also in superfish-modified.css(themes/YOUR-THEME/css/modules/blocktopmenu/css) you have to change "767px" and "768px" to "991px" and "992px"

[gaziana]

Hello, sorry disturbing,

I'm experiencing this same problem in prestashop 1.7.3.1 but the menu and the othe files are not present in the new release... please would you like to help me, i nee to activate responsive modality at 800px.

 

Thnak you so much for your help

[YvanM]

On 01/05/2018 at 10:20 PM, gaziana said:

Hello, sorry disturbing,

I'm experiencing this same problem in prestashop 1.7.3.1 but the menu and the othe files are not present in the new release... please would you like to help me, i nee to activate responsive modality at 800px.

 

Thnak you so much for your help

Hi ! Have you find a soluce ?

[gaziana]

30 minutes ago, YvanM said:

Hi ! Have you find a soluce ?

hello, I had to modify the responsive.js file of my custom theme, you should modifiy the media queries of the specifica screen resolution in your responsive.js files and css files, but it dependso from your theme, I've spent a lot of time on my theme folder to understand wich file it was to be modified.

[Borisvit]

In my case, editing prestashop/themes/[theme]/assets/js/theme.js helped. Find u.default.responsive.min_width and replace the numeric value with your pixel value.