Jump to content

[SOLVED] Block Top Menu, vertical categories - 1.7.4


ba609

Recommended Posts

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 !!!!

Link to comment
Share on other sites

  • 2 weeks later...

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.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...
  • ba609 changed the title to [SOLVED] Block Top Menu, vertical categories - 1.7.4
  • 1 year later...
  • 3 months later...
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/

Link to comment
Share on other sites

  • 3 weeks later...

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;
}

 

custom css.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 4 weeks later...
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

Captura de pantalla (20).png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...
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.

Screen Shot 2020-07-07 at 4.12.18 PM.png

Link to comment
Share on other sites

  • 11 months later...
  • 5 months later...
  • 8 months later...
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!

Link to comment
Share on other sites

  • 9 months later...
.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 by joe ramires (see edit history)
Link to comment
Share on other sites

  • 4 months later...
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 

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...