Top Horisontal Menu mobile responsive

[Donnerberg]

Hello people,

 

Customers which uses mine site reported me big problem with scrolling on mobile phones.

 

Namely, Top Horisontal Menu is placed at the right place where naturally your thumb starts to scroll down page.

 

Considering "top horisontal menu" module respond with drop down menu when ever and where ever you touch it, there is problem become.

 

My question is, does anyone know, how to customize "Top Horisontal Menu" module, to be responsive on mobile phones and ONLY when someone press " + " symbol ( which is at the right side of menu ) to show drop down menu with subcategories.

 

screenshoot: http://prntscr.com/chiuok

 

Thanks in advance for your time and will to help.

 

Regards,

Nikola,  donnerberg.net

[Teapot Creative]

Hi Nikola,

 

By default, this menu will only open when it is tapped, what may be happening is the user is making a tap interaction to initialise the scroll with their thumb, causing the menu to open.

 

An easy way to negate this would be to reposition the menu open icon to the left side of the menu, these changes will need to be made to the "superfish-modified.css" file within the following directory:

http://donnerberg.net/eu/themes/theme1050/css/modules/blocktopmenu/css/superfish-modified.css

On line 250 change

.cat-title:after {
    display: block;
    font-family: "FontAwesome";
    content: "\f067";
    position: absolute;
    right: 15px;
    top: 18px;
    font-size: 26px;
}

to

.cat-title:before {
    display: block;
    font-family: "FontAwesome";
    content: "\f067";
    left: 0;
    float: left;
    top: 18px;
    margin-right: 20px;
    font-size: 26px;
}

And alter line 260 from

.cat-title.active:after {
    content: "\f068";
}

to 

.cat-title.active:before {
    content: "\f068";
}

Adding a width to the overall menu would also create some room for the thumb to scroll down the right without interacting with the menu illustrated with a red border in the attached screen shot. Code below I added a width of 70%:

.cat-title {
    display: block;
    font: 400 19px/22px "Roboto", sans-serif;
    text-transform: uppercase;
    color: #fff;
    width: 70%;
    display: block;
    padding: 17px 20px 17px 20px;
    position: relative;
    border-left: 1px solid #383838;
    border-right: 1px solid #383838;
    cursor: pointer;
}

Many thanks,

 

Ant.

Edited September 15, 2016 by PrestashopUK (see edit history)

[Donnerberg]

Hi Nikola,

 

By default, this menu will only open when it is tapped, what may be happening is the user is making a tap interaction to initialise the scroll with their thumb, causing the menu to open.

 

An easy way to negate this would be to reposition the menu open icon to the left side of the menu, these changes will need to be made to the "superfish-modified.css" file within the following directory:

http://donnerberg.net/eu/themes/theme1050/css/modules/blocktopmenu/css/superfish-modified.css

On line 250 change

.cat-title:after {
    display: block;
    font-family: "FontAwesome";
    content: "\f067";
    position: absolute;
    right: 15px;
    top: 18px;
    font-size: 26px;
}

to

.cat-title:before {
    display: block;
    font-family: "FontAwesome";
    content: "\f067";
    left: 0;
    float: left;
    top: 18px;
    margin-right: 20px;
    font-size: 26px;
}

And alter line 260 from

.cat-title.active:after {
    content: "\f068";
}

to 

.cat-title.active:before {
    content: "\f068";
}

Adding a width to the overall menu would also create some room for the thumb to scroll down the right without interacting with the menu illustrated with a red border in the attached screen shot. Code below I added a width of 70%:

.cat-title {
    display: block;
    font: 400 19px/22px "Roboto", sans-serif;
    text-transform: uppercase;
    color: #fff;
    width: 70%;
    display: block;
    padding: 17px 20px 17px 20px;
    position: relative;
    border-left: 1px solid #383838;
    border-right: 1px solid #383838;
    cursor: pointer;
}

Many thanks,

 

Ant.

Dear Ant.

 

That is really clever solution. Thank you for your kindes, time and on detail answere.

 

This WORKS just fine. WELL DONE

 

Best Regards,

Nikola