MEGA MENU ITEMS WIDTH, HEIGHT AND SIZES

Hello, im wondering if there is any option or way to change some styles, size, width and height or to change the space between menu items on mega menu. we have a lot of categories and we wanted to make the items little smaller when mega menu opened because its reach the bottom of the screen. i found a solution with ubermenu but i won’t want to install additional plugin for every small changes and as the theme has its own megamenu functionality i want to stay with default theme features, please check the screenshots to understand what i mean. thank you in advance

Attachments:

You must be logged in to view attached files.

Hello,

You need to assign a class to the Extra menu list item and write custom CSS. If you need help with the CSS, assign class and we shall help you.

Best Regards

yes probably i will need help im not very familiar with css…

whould i add class name on every item or i can add class name only on the row item? you can check my screenshots

Attachments:

You must be logged in to view attached files.

Hello,

Yes, it is enough to assign the class to the column, not to all items individually http://prntscr.com/o2y3o7

Please add this code to the Theme Settings > Custom CSS > Global:

body .menu-epipla .sub-sub-menu li a{
    display: block;
    padding: 15px 0;
    font-size: 22px;
    line-height: 28px;
}
body .menu-epipla .sub-sub-menu li a span{
color:red;
}
body .menu-epipla >li>a{
margin-bottom:0;
padding:20px;
}
body .mega-menu-list>li>a, .menu-mega-dropdown .menu-epipla >li>a span{
color:green;
font-size: 10px;
}

Change the color and values as per your needs

Best Regards

you are awesome!! i fixed it as you told me thank you. i have one more question as you can see on screenshots, i have set the Site width to 1600px so im wondering if i can adjust also the mega menu at that pixels, i know that i can set custom sizes on the menu but when i set it on 1600px
the menu not stay center but it goes right, is there any trick that can center the menu width?

im sorry the screenshot not uploaded on previous reply, so i uploaded them again. also can you take a look at my css it is ok?

body .menu-epipla .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-lekanes .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-mpataries .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-mpanieres .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-kampines .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-niptires .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-aksesouar .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-stiles-ntouz .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-ntouzieres .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

body .menu-kazanakia .sub-sub-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 10px;
}

.sub-menu-dropdown.color-scheme-light {
    background-color: #2d2d2d;
}

Attachments:

You must be logged in to view attached files.

Hello,

You need to set Full-width in menu item for mega menu block.

I do not see any errors in your CSS. So if you like the effect which you have it is correct.

Best Regards

yes i know that i can set the menu to Full-width but there is the point that i don’t want full width, i just want to set example 1600px on menu item and display in the center of the page not on the right as it show on screenshot!

take a look on the screenshots below, thank you in advance!

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the valid site admin access I will check the settings.

Best Regards

yes sure, at this moment i have set it to full width, so you can check what you need, thank you!

Hello,

The first three items are set to be full-width and they are full-width now https://gyazo.com/081340ef451edf238b9e1d847a863f52

Please check. Do the same with the rest of the menu items. When you set the full-width the menu item would occupy all the space, if you set the size it will take part and not be centered

Best Regards

Elise you have misunderstood me! i already know how to set the full width menu, my point is not to set the menu in full width, check my last reply that i have upload 2 screenshot you will understood what i mean!. i will try to explain one more time… so here we go,
i want to set the menu to custom size example 1600px or 1024px etc, when i set the size on custom pixels the menu not stay centered, i make some photoshop tricky staff so i think you will understood now what i want to do!please check the screenshots

Attachments:

You must be logged in to view attached files.

Hello,

1. You set 1600px width for your site;

2. You set full width for menu item it will take the space of the main container, yours is 1600px and here is testing on my side: https://gyazo.com/aa068a38552b01325a019276cb96cd20

I am checking your site: https://gyazo.com/3e7b90ac55cd7c6e962bd4eef45d005d I am not logged in and the full-width menu works properly.

I have logged in and see this https://gyazo.com/7ea77d9bdc4139c9cc09927621a805d1 I suppose one of the plugins influence. Try to deactivate the plugins not related to the theme and you will get the result you are trying to achieve.

Please note, if you use the option “Set size” it would not be centered. It is the way it works. It is supposed you would use size more narrow then your main block.

Best Regards

this I am checking your site: https://gyazo.com/3e7b90ac55cd7c6e962bd4eef45d005d I am not logged in and the full-width menu works properly. is the public eshop, we are use ubermenu on that and yes on that domain with ubermenu plugin the dropdown of menu is centered.

the website is set to full width

this is the full width dropdown menu https://gyazo.com/f46f96e65fa1b5ccd65171173059e1ca
that we want to remove black empty space from the left and right.

and this is the custom size dropdown menu https://gyazo.com/48a1906bc87c5277fdd8603942c2e0ca
as you can see the dropdown it goes righter when mouse hover on different menus.

and this is the mega menu with ubermenu plugin: https://gyazo.com/0b0b610b7ad7c079861c8b6dcec2bd35

we just want to make the default theme dropdown menu just like the ubermenu display style,

i hope that this time you will understood me!

Hello,

We do not provide support on the third parties plugin. You need to deactivate all the plugin not related to the theme and you will get the block width which you show here

and this is the mega menu with ubermenu plugin: https://gyazo.com/0b0b610b7ad7c079861c8b6dcec2bd35

Here is the full-width mega block in our theme without the plugin http://prntscr.com/o3jp5t

Best Regards

On the website there is no external plugin for such thing, there are only some woocommerce official plugins and some other that are related for other features, you can see by yourself if you login on administrator. Also as you can see the url below is on development stage

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .item-event-hover:hover>.sub-menu-dropdown{
max-width:1000px;
}

Set the width as per your needs. And set the full-width for the menu items. You will get the result like this http://prntscr.com/o3u9e0

Best Regards

hi again, i did exactly what you told me, i set the all menu items to full width and i add the css on global, as you can see dropdown its still goes right as you go on next menus, the css it seems that work like custom size on menu items i mean there is no difference

After css added: https://gyazo.com/43eedc9949997069d6586b48c2c8762f

CSS Code: http://prntscr.com/o40s4g

Hello,

1. Set the full-width of the menu items

2. Please replace the code with this one:

.menu-item-design-full-width .sub-menu-dropdown {
    background-color: transparent!important;
    box-shadow: none;
}

.menu-item-design-full-width .sub-menu-dropdown > .container {
    background-color: #191919;
    margin-top: -30px;
    padding-top: 30px;
    padding-left: 30px;
 padding-right: 30px;
    box-shadow: 0 0 3px rgba(0,0,0,.15);
    max-width: 1192px;
}

You will get this result: https://gyazo.com/6d424f3cf3d86bd4c40ead82ce0cb695

Best Regards

[Author]

Posts