[Resolved] Sub-Menu Background Width Issue

[Mary Pearson]

Hi Tom,

I’m still working on the PlantBest website. It is finally coming together with the exception of one sub-menu width.

If you go to http://104.238.66.130/~thijs/ and click on GLOBAL HORTICULTURAL PRODUCTS -> COCONUT COIR PRODUCTS you will see that the arrows for the next sub-menu are in the right place but the background is too wide.

My coding is

.secondary-menu > li > ul {
width:260px !important;
}
.menu-item-192, .menu-item-222, .menu-item-151,
.secondary-menu > li > ul > li > ul {
width:200px !important;
}
The menu item numbers are correct. I don’t know what else to check.

Many thanks!

[Adrian Cojocariu]

You also have a problem in the first submenu, as text goes over the edge, take a look.

Other Problems

You defining the width made the menus stop at a certain width causing the text to overlap.

Why not just let it with no CSS wouldn’t it get responsive ? The next menu item (menu-item-173/GLOBAL RETAIL PRODUCTS) looks ok, just put the same CSS as on that menu item and it should be ok ?

[Mary Pearson]

Thank you for your input. Yes I know I have other problems, but if Tom could respond to one of the problems then I could figure it out for the others.

The reason that I am changing widths is because without making the changes some of the menu items take up two lines. It doesn’t look “clean”. I want each sub-menu to be as narrow as possible, but to accommodate all items on one line.

[Mary Pearson]

Thanks everyone. I figured it out myself.

[Mary Pearson]

I thought I had this resolved but apparently not. I am still having trouble with the width of the second sub-menu under GLOBAL HORTICULTURAL PRODUCTS. i.e. column with COIR PLANTABLE POTS.

The width is correct at 200 px as shown by position of the arrows, but the background is too wide. How do I reduce the width of the background please.

This is the coding I have now.

.menu-item-150, .menu-item-151, .menu-item-178, .menu-item-192, .menu-item-222,
.secondary-menu > li > ul > li > ul {
width: 200px !important;
}

Website is: http://104.238.66.130/~thijs/

Many thanks!

[Adrian Cojocariu]

It is getting the CSS overwrite from this code after.

}
.menu-item-344, .menu-item-345, .menu-item-346, .menu-item-347, .menu-item-429, .menu-item-430, .menu-item-431, .menu-item-445, .menu-item-446, .menu-item-454, .menu-item-461, .menu-item-467, .menu-item-473, .menu-item-484, .menu-item-489, .menu-item-494, .menu-item-501, .menu-item-505, .menu-item-509, .menu-item-517, .menu-item-518,.menu-item-519, .menu-item-529, .menu-item-534, .menu-item-544, .menu-item-545, .menu-item-546, .menu-item-550, .menu-item-553, .menu-item-556, .menu-item-560, .menu-item-563, .menu-item-573, .menu-item-574, .menu-item-772,
.secondary-menu > li > ul > li > ul {
  min-width:390px !important;
}

You have another menu tab, where you set 390px width and you use !important. Since it is after the one other ones and it’s identical, it overwrites it.

You see they are identical, just the other one below has bigger width, and it overwrites.

.secondary-menu > li > ul > li > ul {
  width: 200px !important; 

.secondary-menu > li > ul > li > ul {
  min-width:390px !important;

[Mary Pearson]

Well if I am specifying the menu item numbers for each, doesn’t that make them NOT identical?

What is the solution?

[Adrian Cojocariu]

I still think you can reduce all the code to this, you’re specifying each and every menu item, that would be ok for different width on each, but you basically want just 2 to 4 different ones…

.secondary-menu .menu-item-172 .sub-menu {
   width:300px !important;
}

.secondary-menu .menu-item-172 .sub-menu .sub-menu {
   width: 200px !important; 
}

.secondary-menu .menu-item-173 .sub-menu {
   width:235px !important; 
}

.secondary-menu .menu-item-173 .sub-menu .sub-menu {
   min-width:390px !important;
}

Maybe you group your current menu CSS in a comment tag and try this, maybe it works ^_^

But the problem is there, the CSS !important tag is overwriting. I can prove this because they are exactly the same width.

[Adrian Cojocariu]

Just remember to keep you current CSS saved at least in a notepad or something ^_^

[Mary Pearson]

Thank you, thank you, thank you!!!! That did the trick. I just had to add a third sub-menu for the HORT links and all is as it should be.

Many, many thanks!!!!!!!!

[Adrian Cojocariu]

The site looks pretty cool I can admit ^_^ keep up the good work !

Just as a little advice, my eyes kinda get dizzy on reading the font, maybe bold it just a little more 😀

[Mary Pearson]

Many thanks! May I ask what part of it you find fuzzy? The links – top or sidebar? Content? I think the content font could be a bit bigger. I’ll play around with it. I do appreciate your constructive criticism. Thank you again.

[Tom]

Love it! Thanks for helping out, Adrian! 🙂

[Adrian Cojocariu]

I was only referring to the white text on the muddy background in the footer/menus, especially the footer.

I’m also very tired, might be just me ^_^

You’re welcome man.

[Mary Pearson]

Thank you “man”. I’ve been making changes since you mentioned it.

BTW, I’m not exactly a man. I’m a 70 year old lady. LOL

[Author]

Posts