Jump to content

[SOLVED] Block Top Menu, vertical categories - 1.7.4


ba609
 Share

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

Share this post


Link to post
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 2
  • Thanks 1

Share this post


Link to post
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/

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

  • 11 months later...
  • 5 months later...

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

01.jpg

02.jpg

Share this post


Link to post
Share on other sites

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
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More