Custom menu for products - style - Support | Kriesi.at

Viewing 20 posts - 1 through 20 (of 20 total)

Author

Posts
April 8, 2023 at 7:56 pm #1403903

andupro
Participant

Hello,

I’ve created a custom menu for products and I would like to make the style for it (ludi site) like on the cam site (all products menu). Can someone help me, please ?

Thank you,
Alex

April 8, 2023 at 8:14 pm #1403906

andupro
Participant

for example I would like that the subcategory to be visibile on mouse over (like on cam site)

April 11, 2023 at 7:24 pm #1404158
Mike
Moderator
Hi,
Thanks for your patience and the link to your site, I see that your Magazin menu item is the only one with a submenu and it is a mega menu, for this to slide up into view on hover try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
#top #header .menu-item-mega-parent:hover .avia_mega_div {
    animation: slideup 1s;
    animation-fill-mode: forwards;
}
@keyframes slideup {
    0% { top: 200%; }
    100% { top: 100% }
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
April 11, 2023 at 8:42 pm #1404163

andupro
Participant

Hi Mike,

Thank you for your answer. Unfortunately, it’s not what I wanted. Maybe I didn’t write well what I wanted.

I’ve asked for the custom menu that I’ve created which is called “Toate produsele” from ludi site. So, I would like to create the same style from menu “All products” from this site: https://andu.inom.ro/cam/ to this one https://www.andu.inom.ro/ludi/ (to “Toate produsele”).

For example, as you can see on this custom menu “All products” (from this site https://andu.inom.ro/cam/) the subcategories are visible on mouseover.

Also, please have a look to the attached print screen.

Hope that I have explained well now.

Thank you,
Alex

April 13, 2023 at 1:59 am #1404291
Mike
Moderator
Hi,
Oh I see, I was looking at the wrong menu. try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
#av_section_1 .flex_column.el_after_av_one_fourth.avia-builder-el-last {
	z-index: 0;
	position: relative;
} 
.menu-meniu-categorii-container ul.sub-menu {
    position: relative;
    left: 100%;
    top: -42px;
    height: 42px;
    background-color: #fff;
}
.menu-meniu-categorii-container .menu-item-has-children {
	height: 42px;
}
.menu-meniu-categorii-container .menu-item-has-children:not(:hover) ul.sub-menu {
display: none;
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
April 13, 2023 at 6:49 am #1404300

andupro
Participant

Hi Mike,

It works now. Can you please help me also with the style for this menu for mobile/tablet devices ?
Have a look to this “all products” menu https://andu.inom.ro/cam/ on mobile.

Thank you,
Alex

April 14, 2023 at 5:31 pm #1404471

Mike
Moderator

Hi,
Glad to hear that this helped, but unfortunately creating a mobile burger menu will not be an easy task, you would be better off using a menu plugin, I recommend looking for one that will give you a shortage that you can add to the page where you want it to show. I have not tested any of these but here is a list of some free ones on WordPress.

Best regards,
Mike

April 18, 2023 at 6:10 pm #1404828

andupro
Participant

Hi Mike,

Thank you. I will try. But could you please tell me how can I do it to have the “sub-menu” class appears under category on mobile ? As you can see, right now, it appears on the right side.

Thank you very much,
Andu

April 18, 2023 at 7:02 pm #1404832

andupro
Participant

And also, could you please tell me how can I add an arrow on the right side to the categories which have subcategories ? Like in the attached print screen.
As the people to know that those categories have subcategories.

Thank you,
Alex

April 18, 2023 at 8:15 pm #1404846
Mike
Moderator
Hi,
For the above css to not efect mobile devices, try changing it to this:
```
@media only screen and (min-width: 768px) { 
#av_section_1 .flex_column.el_after_av_one_fourth.avia-builder-el-last {
	z-index: 0;
	position: relative;
} 
.menu-meniu-categorii-container ul.sub-menu {
    position: relative;
    left: 100%;
    top: -42px;
    height: 42px;
    background-color: #fff;
}
.menu-meniu-categorii-container .menu-item-has-children {
	height: 42px;
}
.menu-meniu-categorii-container .menu-item-has-children:not(:hover) ul.sub-menu {
display: none;
}
}
```
After applying the css, please clear your browser cache and check.
your screenshot doesn’t work try using an Screenshot service and pasting the image URL in your post.

Best regards,
Mike
April 18, 2023 at 8:21 pm #1404851

andupro
Participant

Hi Mike,

I’ve put it but it doesn’t appear properly. Have a look, please.

Thank you,
Andu

April 19, 2023 at 12:38 am #1404864

Mike
Moderator

Hi,
When I look at your stylesheet I see both css snippets, please remove the first snippet and only use the second snippet.
Then disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files and clear your browser cache and check again.

Best regards,
Mike

April 19, 2023 at 7:27 am #1404902

andupro
Participant

Hi Mike,

I did it. Now, It’s much better but I see 2 new issues: 1. the background for the second and third subcategories it’s not white (on big screen) 2. on mobile this menu displays categories and subcategories on a single view; is it possible that the subcategories to be visible when I click on the categories like on big screen ?

Thank you,
Andu

April 20, 2023 at 1:06 am #1405007
Mike
Moderator
Hi,
Please try adding this css to correct the desktop sub-menu categories having a transparent background color:
```
@media only screen and (min-width: 768px) { 
#top .content .flex_column .widget_nav_menu .menu-meniu-categorii-container ul.sub-menu li {
    background-color: #fff;
}
}
```
Unfortunately for the mobile view of the menu to have collapsing sub-menus would require writing some javascript and would not be that easy.

Best regards,
Mike
April 20, 2023 at 7:31 am #1405016

andupro
Participant

Hi Mike,

Thank you. It works, now. In regards with the mobile view of the menu to have collapsing sub-menus if it’s necessary I will pay. I really want it. Please tell what to do.

Thanks,
Andu

April 20, 2023 at 12:03 pm #1405038

Mike
Moderator

Hi,
Glad this helped, we are not setup to do custom paid work, I would recommend hiring a freelancer on UpWork.com, I would imagine you can find someone reasonably priced to do this for you.

Best regards,
Mike

April 26, 2023 at 7:27 pm #1405738

andupro
Participant

Hi Mike,

I did it. Thank you for your advice. One more thing please: how can I add from css an arrow (like this >) on the right side on the categories that have subcategories ? To be easy for the user to know that there are avaiable more products/subcategories.

Please take a look on this website: https://andu.inom.ro/cam/ on “All produts” to understand what I would like.

Best regards,
Andu

April 27, 2023 at 12:53 am #1405754
Mike
Moderator
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
.menu-meniu-categorii-container .menu-item-has-children > a:after {
  content: '>';
  float: right;
  padding-right: 10px;
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
April 27, 2023 at 1:35 pm #1405823

andupro
Participant

Hi,

Thank you very much, Mike! I really appreciate your support.

Br,
Andu

April 27, 2023 at 5:50 pm #1405846

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Custom menu for products – style’ is closed to new replies.