Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 5, 2020 at 9:15 pm #1181903
    amanda-mdllc

    Good Afternoon Kriesi!

    So I have a Mega Nav that I am pushing the boundaries with and I would love your wisdom as to how to get there.
    • How do I go about having a border-right: on the first/second column (obviously not the last column lol).
    • Have the Red underline hover have some padding-bottom on main nav? I tried but it was making the links jump.
    • Have a different font color/style for various titles and nested links?

    I appreciate your time in advance and thanks bunches & bunches!!
    ~Amanda

    February 8, 2020 at 4:55 am #1182443
    Rikard

    Hey amanda-mdllc,

    Please try this in Quick CSS:

    #top #header .avia_mega_div > .sub-menu > li > ul:not(:last-child) {
    border-right: 1px solid red;
}

    Best regards,
    Rikard

    February 10, 2020 at 7:47 pm #1183198
    amanda-mdllc

    Afternoon Rikard,

    I tried that but it does not seem to work. Any other suggestions? I am reattaching the the mock in the private content section below.

    I am trying to add the line along the columns
    The main links in the mega nav to be the Bold Blue
    The nested links to be the Grey

    Thanks!
    ~Amanda

    February 13, 2020 at 3:24 am #1184036
    Ismael

    Hi,

    Thank you for the update.

    1.) You can add the following css code to add borders between the columns.

    #top #header .avia_mega_div > .sub-menu > li:nth-child(1), #top #header .avia_mega_div > .sub-menu > li:nth-child(2) {
	border-right: 3px solid red;
}

    2.) Use this to adjust the underline or indicator below the menu items.

    #top .av_header_transparency .avia-menu-fx {
	bottom: 30px;
	width: 70%;
	left: 15%;
        display: block;
}

    3.) For the mega menu column title, this should help.

    #header .mega_menu_title {
	color: #f4b233;
	font-family: 'Open Sans Condensed', sans-serif !Important;
}

    Best regards,
    Ismael

    February 13, 2020 at 6:04 pm #1184236
    amanda-mdllc

    yay Ismael we are very close!!!!

    2 things when you hover the mega nav on columns that only have 2 columns I need to have that extra divider line removed. “About Us” is the only 2 column nav item.

    The other thing is I need to make the
    #header .mega_menu_title 1st UL to be bold #005291 and the nested ULs underneath it to be #666666

    ex: Under the About Us –> Who We Are nav “Our People” needs to be bold & blue & United Way Staff needs to be the grey.

    I would love for it to be like this for all #header .mega_menu_title 1st ULs

    I am attaching the screenshot again for a design reference.
    Thanks again for all your help

    February 17, 2020 at 4:03 am #1185058
    Ismael

    Hi,

    Thank you for following up.

    You can add this css code to change the style of the parent menu or those with child items.

    #top #header .avia_mega_div > .sub-menu > li > .sub-menu > li.menu-item-has-children > a {
	color: blue;
	font-weight: bold;
}

    And this css code for the child items.

    #top #header .avia_mega_div > .sub-menu > li > .sub-menu > li.menu-item-has-children ul li a {
	color: gray;
}

    Best regards,
    Ismael

    February 17, 2020 at 5:34 pm #1185317
    amanda-mdllc

    Thanks for the above! I have 1 more thing and then I think we’re done.

    For Mega Nav columns that only have 2 columns I need to remove the yellow diving line. Is that possible? All columns but About Us only have 2 and need to have the yellow border removed.

    February 20, 2020 at 10:54 am #1186283
    Ismael

    Hi,

    Yes, that’s possible. Add the following code below the previous css modification that we added to apply borders to the mega menu columns.

    #top #header #menu-item-6965 .avia_mega_div > .sub-menu > li:nth-child(2) {
	border-right: 0;
}

    The #menu-item-6965 selector is the unique identifier of the Our Work menu item.

    Thank you for your patience.

    Best regards,
    Ismael

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