Return to previous page

Full Width Menu Content Alignment Problems

This topic has 29 replies, 4 voices, and was last updated 10 years, 2 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

sophie

Participant

September 17, 2014 at 15:31

Hello Eva,

Please find my admin login detail below. Could you please also advise if it’s save to update my wordpress to the latest version (wordpress 4.0).

Thanks!

Please, contact administrator
for this information.

#15907 Copied

Robert Hall

Support staff

September 18, 2014 at 06:55

Hello,

I’ve made change in menu with image on your website. Look at menus in the admin panel and you can edit them.
Don’t worry, you can update WordPress to the latest version.

Regards,
Robert Hall.

#15979 Copied

sophie

Participant

September 18, 2014 at 09:35

Hello Robert, thanks for the help! Though there’s one more thing that needs changing. All items under clothing are subcategories, but currently it’s as if dresses and leggings are the main categories under clothing, with the other ones underneath them. Could you help me fix it please?

Thanks!

#15995 Copied

sophie

Participant

September 18, 2014 at 09:38

I’ve just had a look at menus in the admin panel and change them (so they’re all at the same level), now they’re all over the place!

#15996 Copied

Robert Hall

Support staff

September 18, 2014 at 10:06

It’s because there is no contribution. You need to do them correctly.
Look at screenshot.
http://prntscr.com/4nx4me

Regards,
Robert Hall.

#15999 Copied

sophie

Participant

September 18, 2014 at 10:12

So does it mean that I have to have sub-items under each subcategory under ‘clothing’? The subcategories were aligned correctly yesterday (without having any sub-items underneath them) before we move the image up.. Is there any way to get around this?

#16002 Copied

Robert Hall

Support staff

September 18, 2014 at 10:25

If you want add image and nice menu, then there should be a submenu with class et-col as it was edited by me.

Regards,
Robert Hall.

#16004 Copied

sophie

Participant

September 18, 2014 at 14:55

Hi Robert, are you saying that it’s not possible to align the categories under clothing without having sub-items under them?

#16049 Copied

Eva Kemp

Support staff

September 18, 2014 at 15:54

Hello,

Yes, you’re right. Unfortunately it can’t be done other way. Sorry.

Regards,
Eva Kemp.

#16058 Copied
Tagged: best selling, content alignment, full width menu, problems, seo friendly, woocommerce themes
Viewing 29 results - 1 through 29 (of 29 total)