Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 16, 2020 at 2:14 am #1213486
    CharlieTh

    I have a menu item.
    It is styled as Button.
    I have input a description.

    Your documentation clearly explains how to put a description in position under a menu item via CSS.

    But…question here is — how do I put the description WITHIN the colored button? Looks strange to have a button — and then have sub-text unconnected to it.

    Can you help me with this. I’ve been playing for hours, but never quite get there.

    Thanks!

    May 16, 2020 at 4:36 am #1213493
    Jordan Shannon

    Hey CharlieTh,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    May 16, 2020 at 5:50 pm #1213608
    CharlieTh

    Thank you, Jordan.
    It is: https://unjunking.com/

    There ARE subtexts set on the menu, they’re just not WITHIN the button “canvas.”

    Thanks for taking a look at it.

    May 17, 2020 at 1:35 am #1213684
    Jordan Shannon

    Hi,

    Apologies, I’m not seeing the sub-text. Can you screenshot the area you need help with?

    Best regards,
    Jordan Shannon

    June 4, 2020 at 2:39 am #1219269
    CharlieTh

    Sorry…Jordan, I made a tricky thing even trickier. Put this css in so the “subtext” or “description” under the menu items is in red and you can see what I’m dealing with better.

    Idea is to put the “description” WITHIN the green button so it looks like PART of the green button.

    Think client’s descriptions WAY too long, but if I can do it with shorter one, think it will be nice techniche — and perhaps other Enfolders (a new group name!) will like to use, as well.

    /*Playing with the "taglines" or "subtext" on the buttons -- the description stuff*/
#top #header #avia-menu li.menu-item a > .avia-menu-subtext{
  display: flex;
  margin-top: -60px;
  color: red;
  font-size: 12px;
  font-weight: lighter;
  letter-spacing: 0.15em;
}

    Is it possible?

    June 4, 2020 at 2:40 am #1219270
    CharlieTh

    Also, while you’re looking at same page. I note on Portrait screen that the multiple lines of menu items end up overlapping the top slider.
    How do I make the menu area “push down” the slider so it doesn’t get covered over?

    Thanks for any suggestions.

    June 12, 2020 at 1:43 pm #1222057
    Mike

    Hi,
    Sorry for the late reply and thanks for the link, it looks like your style is on .avia-menu-subtext please try removing and apply to the link (a) like this:

    li.av-menu-button a {
	background: linear-gradient(#8fc74a, #cada48) !important;
    color: black !important;
    border: 2px solid #719430;
    border-radius: 25px;
padding: 0 9px;
}

    Then you can adjust the red subtext via the margin-top: -60px; which is forcing it above the menu text.
    You will probably want to fine tune the button css, but this is the basic idea:
    2020-06-12_073938.png

    Best regards,
    Mike

    June 13, 2020 at 6:38 pm #1222390
    CharlieTh

    Mike…so so much better! Clever.

    But I’m not properly parsing your instructions, I fear.

    June 13, 2020 at 8:14 pm #1222398
    Mike

    Hi,
    The buttons are overlapping due to this css, probably in your Quick CSS:

    .av-menu-button + .av-menu-button {
    margin-left: -10px;
}

    Try changing to this:

    .av-menu-button + .av-menu-button {
    margin-left: 10px;
}

    But the subtext still makes the buttons very large, please try these changes:

    .html_header_top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child > li > a {
    line-height: 25px;
/*was: line-height: 50px;*/
}
#top #header #avia-menu li.menu-item a > .avia-menu-subtext {
    margin-top: -5px;
/*was: margin-top: -45px;*/
}

    After applying these changes, Please clear your browser cache and check.
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    June 25, 2020 at 9:24 pm #1225661
    CharlieTh

    Looks great! Still playing with it before writing it up. You can, however, close this issue. Thanks so much for your expert help!

    June 25, 2020 at 11:22 pm #1225679
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Put description or subtext into menu-button-colored area’ is closed to new replies.