[SOLVED] Block Top Menu, vertical categories - 1.7.4

[ba609]

Hello,

I installed v. 1.7.4 and I would like to change the default top-menu. The sub-categories are horizontal and I do not like it, because the opening hides the logo.

I'd like it to open vertically, similar to the drop down menu of 1.6, how can I do? There is a solution?

If there is an identical discussion, please send me the link, I have not found anything.

Hello and thank you in advance !!!!

[razaro]

You will have to edit  css a bit for changes. If you use default theme with no changes.

File custom.css is in themes/classic/assets/css/ and add these lines

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    position: absolute;
}

#header .menu, #header .menu>ul>li {
    display: inline-block;
    position: relative;
}

.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;
}

That should produce http://nimb.ws/rpdzFK, after saving and clearing PrestaShop cache.

[ba609]

Thank you ! I test your solution. 

I'm using the classic theme.

 

[ba609]

Hi,

the Razaro's code is ok , but i have little problem !!!

Some categories don't automatic word wrap, see the attached.

 

🖐️

[razaro]

Can you share a link where are you trying that ?

[ba609]

Quote

Can you share a link where are you trying that ?

Hi Razaro,
I send you in private. OK?

🖐️

Edited November 27, 2018 by ba609 (see edit history)

[ba609]

I have writing code mistake !

The solution of Razaro is correct.
 

👍

[andrew2019]

Thanks it works

[Juanhzc]

On 11/15/2018 at 2:59 PM, razaro said:

You will have to edit  css a bit for changes. If you use default theme with no changes.

File custom.css is in themes/classic/assets/css/ and add these lines

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    position: absolute;
}

#header .menu, #header .menu>ul>li {
    display: inline-block;
    position: relative;
}

.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;
}

That should produce http://nimb.ws/rpdzFK, after saving and clearing PrestaShop cache.

It works great, but how do I hide the second level and show it when I mouse over

example: https://webdesignerwall.com/demo/css3-dropdown-menu/

[Funieru Bogdan]

It works on 1.7.6.4, default theme. thanks ;)

[khemia]

Hello,

The custom.css should look exactly like this ??  Do I miss something ? Nothing changes in front end... what should I do ?

I already cleared the cache. anything else ?

 

 

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    position: absolute;
}
#header .menu, #header .menu>ul>li {
    display: inline-block;
    position: relative;
}
.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;
}

 

[Funieru Bogdan]

yes, also clear your cache, or disable it when you make modification to you css so that you see them in realtime. That's what i did, in the ccc section in Advance parameters -> Performance i had disabled the cached CSS so that i can see  what i modify immediately. After done, reenable it, and all should be fine and dandy

"Cheers

[khemia]

Still no changes in front end... 

[WRSTRKE]

On 11/15/2018 at 5:59 PM, razaro said:

You will have to edit  css a bit for changes. If you use default theme with no changes.

File custom.css is in themes/classic/assets/css/ and add these lines

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    position: absolute;
}

#header .menu, #header .menu>ul>li {
    display: inline-block;
    position: relative;
}

.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;
}

That should produce http://nimb.ws/rpdzFK, after saving and clearing PrestaShop cache.

Hi Razaro, can you help me? how can change the back color of the sub-menu? i want to set to black, like the horizontal menu

[Funieru Bogdan]

Right Click in chrome inspect, on the menu space, and play with the css ( on the right ) to change / add color for the menu, after you get the right setting, copy it into the custom.css in the segment ( property ) that you need it to be in.

I think in the .top-menu section should be the place to put it in. I don't use this anymore as i needed something else for my site.

Cheers

[Nexus85]

On 4/11/2020 at 1:26 AM, Juanhzc said:

It works great, but how do I hide the second level and show it when I mouse over

example: https://webdesignerwall.com/demo/css3-dropdown-menu/

Is there a solution, this is exactly what i'm looking for.

[xlinegraphics]

On 11/15/2018 at 3:59 PM, razaro said:

You will have to edit  css a bit for changes. If you use default theme with no changes.

File custom.css is in themes/classic/assets/css/ and add these lines

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    position: absolute;
}

#header .menu, #header .menu>ul>li {
    display: inline-block;
    position: relative;
}

.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;
}

That should produce http://nimb.ws/rpdzFK, after saving and clearing PrestaShop cache.

Hi Razaro (or anyone else).  I tried this code and it worked but there was one problem.  My sub-menu appears far down on the screen.  Do you know what would cause this?  I used chrome to try to locate the issue but I am at a loss.  Any help would be greatly appreciated! 😀

I reverted the site back to the original code for the time being but attached a screenshot of the issue.

[Funieru Bogdan]

@xlinegraphics : In chrome for example, right click -> inspect on the dropdown, and adjust the css code accordingly. There might be something interfering with it, and thus you need to adjust it.

cheers

[skeccy]

@xlinegraphics Hi, were you able to solve the problem? I also encountered the same problem as you. Any solution? prestasho 1.7.7.5

[ComGrafPL]

2 hours ago, skeccy said:

@xlinegraphics Hi, were you able to solve the problem? I also encountered the same problem as you. Any solution? prestasho 1.7.7.5

Post your website link. Maybe just hooks issue.

[skeccy]

My link is www.sicilia-bedda.it but now i have disabled the code modifications.

[SalvanaRik]

Hi all, same problem for me, the code works perfectly on first line of main menu, but sub-menu is far down on second line of main menu, and more far down on third line too. Someone to solve it ?

Thanks

[Yulia Vitun]

On 11/15/2018 at 9:59 PM, razaro said:

You will have to edit  css a bit for changes. If you use default theme with no changes.

File custom.css is in themes/classic/assets/css/ and add these lines

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    position: absolute;
}

#header .menu, #header .menu>ul>li {
    display: inline-block;
    position: relative;
}

.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;
}

That should produce http://nimb.ws/rpdzFK, after saving and clearing PrestaShop cache.

PS 1.7.8.7 - all works.

MANY Thanks!

[joe ramires]

.top-menu .sub-menu ul[data-depth="1"]>li {
    margin: 0 1.25rem;
    clear: both;
}
.popover {
    position: absolute;
    top: 0;
    /* left: 0; */
    z-index: 1060;
    display: block;
    max-width: 200px;
    padding: 1px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    font-size: .875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
}
.sub-menu {
    left: auto;
    min-width: 50%;
}

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    display: none;
}

Adding these lines to customm.css is the correct solution to the problem:
 

Edited June 28, 2023 by joe ramires (see edit history)

[alexandr0s]

On 6/28/2023 at 8:27 AM, joe ramires said:

.top-menu .sub-menu ul[data-depth="1"]>li {
    margin: 0 1.25rem;
    clear: both;
}
.popover {
    position: absolute;
    top: 0;
    /* left: 0; */
    z-index: 1060;
    display: block;
    max-width: 200px;
    padding: 1px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    font-size: .875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
}
.sub-menu {
    left: auto;
    min-width: 50%;
}

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    display: none;
}

Adding these lines to customm.css is the correct solution to the problem:
 

Hello, I copy the code in theme.css?

I have themes/classic/assets/css 

[joe ramires]

Create a custom.css file (if you don't have one) in themes/classic/assets/css/ and put the code in it.

 

[alexandr0s]

Didn't work for me. I have Presta 1.7.8.10. I cleared everything, logged in from 2 different computers but nothing changed

[joe ramires]

clear your browser cache - Ctrl+F5 

[alexandr0s]

I did everything, I tried from a different computer but still nothing