Return to previous page

Full Width Menu Content Alignment Problems

This topic has 29 replies, 4 voices, and was last updated 9 years, 7 months ago ago by Eva Kemp

Cybele

Participant

September 4, 2014 at 17:54

Hi, I’m inserting more of ten categories in the full-width submenu and each has a different number of subcategories (sometimes are 16, others are 8, sometimes are 3 and so on).
The problem is that there’s often too much space between the categories and so the alignment is compromised.
Is there a way to eliminate the space (padding) between the various categories?
Here’s a photo of my menu:

https://imageshack.com/i/iq1vSjZGj

Thanks,

F

Please, contact administrator
for this information.

#14307 Copied

28 Answers
Robert Hall

Support staff

September 4, 2014 at 18:09
Hello,

Please add this code into custom.css file.
```
.main-nav .menu .menu-full-width .nav-sublist-dropdown .container > ul > li{
float:none !important;
display:inline-block;
vertical-align: top;
}
```
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#14310 Copied
Cybele

Participant

September 4, 2014 at 18:28

Thanks for the quick reply, but unfortunately this seems not working 🙂
I’d like to have an alignment similar to the one in this website (the only difference is that their menu opens with a click):

http://www.myselleria.it/C82-accessori-per-equitazione

as you can see they don’t have any item floating around the full-width menu.

I just checked and this isn’t a matter of font-size :/

#14312 Copied

Robert Hall

Support staff

September 4, 2014 at 18:45

I’ve made some change. Check it, please.

Regards,
Robert Hall.

#14313 Copied

Cybele

Participant

September 5, 2014 at 10:29

Thanks Robert for the great and fast support!
We’re on the right way but it’s not perfect also because it’s not workin when the “fixed menu” option is on.
I’ve made some change in the font size and items order and the alignment is not going back in order.
Cannot find your modification in the code (i think you changed the padding of the menu items but where?there’s nothing new in the custom.css)..if you show me where to do it i can work on it by myself and be free to change the items orders and fix it everytime i want.
Have a nice day!
F.

#14366 Copied

Robert Hall

Support staff

September 5, 2014 at 10:57

Thank you!
The problem was in this icon>. When you inserting my code icon is translated into the code.
If you have any questions feel free to contact us.

Regards,
Robert Hall.

#14367 Copied

Cybele

Participant

September 6, 2014 at 10:46

Thanks for your support. Now everything is ok except for 1 thing: when I have 4 columns with 8 categories, the last 4 categories are not aligned to the first 4 and there’s no space between the first and the 2nd level (“integratori” is too close to “tosatrici e pettini”:

https://imageshack.com/i/kmimMNyXj

is there a way to fix that?

#14461 Copied
Eva Kemp

Support staff

September 6, 2014 at 14:20
Hello,

I’ve added the following code into custom.css file:
```
li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-has-children.menu-parent-item.menu-item-8600 {
margin-top: 10px;
}
```
Please check the menu now.

Regards,
Eva Kemp.
#14468 Copied
Cybele

Participant

September 6, 2014 at 15:55

Thanks Eva, now the horizontal alignment is pretty much fixed, but when I scroll down the page and I have the fixed header active the new menu shows some of the items losing their alignment, floating down or a kind of. It seems like Legenda full-width menu isn’t a good solution if you need to start a new paragraph, it seems working well with 1 horizontal line of items only (maximum 6). It’s a pity because the full-width menu is a great solution when you need to insert much stuff. Let me know if there’s a way to fix this problem, I was considering to work with this template again in the near future.

#14471 Copied
Eva Kemp

Support staff

September 6, 2014 at 16:53
Hello,

I’ve added the following code into custom.css for the fixed header:
```
 .fixed-header .menu > li.menu-full-width .nav-sublist-dropdown .container > ul > li {
width:20%;
}
 .fixed-header .menu > li.menu-full-width .nav-sublist-dropdown .container > ul > li {
float:none;
display:inline-block;
vertical-align:top;
margin-left: 0px;
}
```
Please check if it’s fine now and clear browser cache before.

Regards,
Eva Kemp.
#14476 Copied
Cybele

Participant

September 15, 2014 at 13:28

Hi Eva, thanks a lot for the great support. Everything is fixed now, except for the last three categories in “ARTICOLI PER EQUITAZIONE” which are not aligned. I tried everything and it seems like there’s no way to fix them properly.

Regards,

Francesca

#15536 Copied

Eva Kemp

Support staff

September 15, 2014 at 16:23

Hello,

Could you please show a screenshot what exactly you want to achieve?
Thank you.

Regards,
Eva Kemp.

#15569 Copied

Cybele

Participant

September 15, 2014 at 16:33

this is the menu (not aligned), we have tried different solutions to fix it but
it seems impossible to make the 2nd line of items aligned with the 1st one

https://imageshack.com/i/pcyxR6pzj

#15572 Copied

Eva Kemp

Support staff

September 15, 2014 at 17:59

Hello,

Sorry, but that is the only solution that we could find to fix the issue with menu items.
Please take our apologies.

Regards,
Eva Kemp.

#15591 Copied

sophie

Participant

September 17, 2014 at 13:59

Hello,

I am having a similar problem. Under ‘Clothing’ we have 10 sub-categories. I want them to be in two columns and for some reason, there is some strange indentation where it shouldn’t be. Could you please have a look for me? My website URL is in private content below.

Thanks!
Sophie

Please, contact administrator
for this information.

#15882 Copied
Robert Hall

Support staff

September 17, 2014 at 14:09
Hello sophie,

Add this code into custom.css file.
```
.main-nav .menu > li.menu-full-width .nav-sublist-dropdown .container > ul > li.et-col5 {
margin-left: 0;
}
```
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#15885 Copied
sophie

Participant

September 17, 2014 at 14:15

Thanks Robert, that worked!

I’ve added a picture to the menu (am going to add another one or two later), how can I get it (or them) to be on the right of the sub-categories rather than at the bottom? Also, can I get the two columns to be slightly closer together?

Sophie

#15887 Copied

Robert Hall

Support staff

September 17, 2014 at 14:30

Read more here:
https://www.8theme.com/demo/docs/legenda/index.html#!/primary_menu
Maybe you need class et-col3 for this.

Regards,
Robert Hall.

#15890 Copied

sophie

Participant

September 17, 2014 at 14:36

Hello Robert,

I’ve just added et-col3 in the css classes for the image but I think it has only made the image slight bigger and hasn’t changed it’s position…

The documentation doesn’t seem to say how to position images on the menu either.

Please help!

#15893 Copied

Eva Kemp

Support staff

September 17, 2014 at 15:19

Hello @sophie,

Please provide us with the login details for wp-admin panel.
Thank you.

Regards,
Eva Kemp.

#15903 Copied
Tagged: best selling, content alignment, full width menu, problems, seo friendly, woocommerce themes
1 2

Viewing 20 results - 1 through 20 (of 29 total)