New Landing › How can we help? › Themeforest Theme Support › Dante › Getting menus and submenus to look "right"

Viewing 15 posts - 1 through 15 (of 18 total)
1 2
  • Back to forum
    Posted in: Dante
  • February 6, 2015 at 5:01 pm #147911
    murageinc
    Member
    Post count: 34

    I’ve scoured the messages regarding menus, their positioning, width, mega vs. non-mega etc. and I haven’t really found a proper solution yet.

    First of all, if there’s a way to search a particular forum (e.g. just the Dante posts), please let me know. I really don’t need to know about anything other than the Dante theme; it’s all just white noise.

    My situation is that I would like to have a main menu (e.g. Home, Services, Support, About), with drop-down menus (e.g. Services -> (Service1, Service2, Service3)) and then one more level deep (e.g. Services -> Service1 -> (Feature1, Feature2, Feature3)). Let’s refer to these tiers as tier 1, 2 and 3 resp.

    I’ll talk a little bit about the mega menus first since this was one of my criteria for choosing this theme. I envision one day that I’ll need the mega menus but at the moment since I don’t have enough content, I have been using the Natural Width Mega Menu option for tier 1 and the Custom HTML Column Width option for tier 2. This works, except that the tier 2 drop-down menu always starts from “right: 0” so they are all in the same position regardless of where its parent tier 1 item is located. This sometimes makes it look like the wrong menu dropped down. If I edit the CSS to remove the “right: 0” then the menu at tier 2 left aligns perfectly with its parent menu item and all looks great, except when the menu is too close to the right edge and gets “cut off” so that the menu is not completely visible. I don’t know if there is an easy solution to this but since I do not really need the mega menus at this time I decided to try disabling them and removing the custom widths that I had set.

    Now, with the non-mega menus, the situation is that the tier 2 menu looks great; the width of the menu adjusts based on the width of the menu items. Brilliant! Then, when the tier 3 menu opens, it’s capped at 100px! The only CSS I’ve been able to find related to this is “min-width: 100px” and if I remove it, the width gets even smaller. For the life of me, I can’t figure out what, CSS-wise, is different between tier 2 and tier 3 that causes this behaviour.

    At the very least, I’d like to be able to use the standard (non-mega) menus and get the tier 3 menus to behave like the tier 2 menus. Better would be to have a variable width menu that will stretch in an attempt to not have to truncate the text until it reaches the end of the window. Any suggestions? Thanks.

    Attachments:
    You must be logged in to view attached files.
    February 9, 2015 at 9:06 pm #148542
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    Can you put a 3rd level menu on your site, so that I can look what you are saying in action?

    Let us know,

    Thanks,
    laranz.

    February 9, 2015 at 10:46 pm #148560
    murageinc
    Member
    Post count: 34
    This reply has been marked as private.
    February 10, 2015 at 5:02 am #148578
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    You want this 3rd level menu to it’s full width right? http://www.swiftideas.com/wp-content/uploads/2015/02/menu_capped_100px.png instead of showing small width and … ?

    I tried to read your text to, can you explain that in a screenshot by how you want?

    Let us know,

    Thanks,
    laranz.

    February 10, 2015 at 5:10 am #148584
    murageinc
    Member
    Post count: 34

    I want it to work like the 2nd level menu works. Correct, I don’t want the “…” to show because there is room for a wider menu so why make it 100px? Why does the 2nd level menu behave differently from the 3rd level menu?

    Let’s say the menu has 3 items:
    > This is the first item
    > This is the second item and the longest
    > This is the third item

    Ideally…
    The menu’s width should be wide enough for the 2nd item, if there is enough space,
    OR
    the menu’s width should be wide enough for the 2nd item, up to some maximum width.

    I hope this clarifies.

    February 10, 2015 at 6:47 am #148587
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    Try this Custom CSS in Theme Options.

    nav.std-menu .menu ul li > a, nav.std-menu .menu ul li > span.title {
  max-width: none; /* Prevent max width */
}
nav.std-menu .menu ul.sub-menu {
  min-width: 230px; /* Increased min width */
}
nav.std-menu .menu ul li > a, nav.std-menu .menu ul li > span.title {
  white-space: pre-line; /* Creates second line */
}

    Let us know,

    Thanks,
    laranz.

    February 11, 2015 at 3:43 pm #149118
    murageinc
    Member
    Post count: 34

    Thanks Laranz. That does help… but it also affects its parent menu (the Products drop-down). The effect I want is exactly how the parent menu is already set up. See the attached images…

    narrow> the min-width of 100px is in effect here
    wide> the second menu item is wider than 100px so the menu width expands
    max> the third menu item is wider than the maximum so the menu width is at max-width

    Is it possible to get this same exact behaviour? If not, is it possible to set the min-width and max-width without affecting the parent menu?

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    February 11, 2015 at 8:26 pm #149188
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    Can you turn the sub-menu’s in the site you gave after the CSS I gave added? I want to see what you’re saying there. If I can’t I will forward that to our development team.

    Let us know,

    Thanks,
    laranz.

    February 11, 2015 at 8:50 pm #149192
    murageinc
    Member
    Post count: 34

    Are you asking me to add the CSS that you gave me so you can see how it turned out? If so, I’ve just added it. Thanks.

    February 11, 2015 at 9:40 pm #149211
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    So what do you mean is the third menu need to take its full width? http://prntscr.com/63y9wc I forward this to one of our colleague to test the issue.

    Let us know,

    Thanks,
    laranz.

    February 11, 2015 at 10:06 pm #149226
    murageinc
    Member
    Post count: 34

    I’m not sure how else to explain this without drawings 🙂 … When you hover over “Products” a menu drops down. Let’s call that menu #1. The behaviour of that menu is exactly what I want (as explained in post #149192). Now if you hover over one of the items in menu #1, another menu opens up but the behaviour of the width is not the same as menu #1. I would like how the width is calculated to be the same as in menu #1 which has a minimum width and maximum width and can therefore have a width anywhere in between the minimum and maximum, which depends on the text length.

    February 13, 2015 at 1:15 pm #149862
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    The widths seem the same to me?

    http://d.pr/i/1gexw/adydx70H

    http://d.pr/i/1aOEv/2p7kjbSV

    – Kyle

    February 13, 2015 at 2:10 pm #149915
    murageinc
    Member
    Post count: 34

    Hi Kyle,

    Yes, that’s with the CSS from laranz. It affects both menus. I’ll remove that so you can see the default behaviour.

    Thanks.

    February 13, 2015 at 3:19 pm #149946
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    So what’s wrong with the CSS by Laranz?

    – Kyle

    February 13, 2015 at 3:30 pm #149955
    murageinc
    Member
    Post count: 34

    Please read posts 149118 and 149226.

  • Back to forum
    Posted in: Dante
Viewing 15 posts - 1 through 15 (of 18 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register