[Resolved] Sub-Menu Background Width Issue

Home Forums Support Sub-Menu Background Width Issue

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #118080
    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!

    #118113
    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 ?

    #118185
    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.

    #118212
    Mary Pearson

    Thanks everyone. I figured it out myself.

    #118226
    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!

    #118241
    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;
    
    #118242
    Mary Pearson

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

    What is the solution?

    #118243
    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.

    #118244
    Adrian Cojocariu

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

    #118249
    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!!!!!!!!

    #118250
    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 😀

    #118251
    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.

    #118252
    Tom
    Lead Developer
    Lead Developer

    Love it! Thanks for helping out, Adrian! 🙂

    #118259
    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.

    #118260
    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

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.