Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 3, 2020 at 1:33 pm #1189716
    raslade

    Hey there

    I’ve been specific about the subject as I can’t find a solution. All the queries relate to the arrows within each menu item.

    I’ve added the arrow I need to the dropdown menus using 

    #menu-item-8596:before {
    content: "";
    margin-left: 45%;
    border-style: solid;
    border-width: 12px 12px 12px 12px;
	border-color: transparent transparent #ffffff transparent;
	position: relative;
	top: -5px;
}

    However I now need to add it to a megamenu which is proving more problematic as the indicator arrow is constrained by the megamenu size. I’ve tried adding a z-index but no luck.

    Any thoughts?

    March 3, 2020 at 2:21 pm #1189740
    Yigit

    Hey,

    Due to our policy, we only connect to websites that are publicly visible.

    Could you please post a screenshot and show the issue you are having and the changes you would like to make? So we can create it on our local installation and provide you an accurate solution.

    You can upload your screenshots on imgur.com or Dropbox public folder and post the links here :)

    Regards,
    Yigit

    March 3, 2020 at 2:57 pm #1189746
    raslade

    Hey Yigit

    Ok sorry about that and here’s the link

    Richard

    March 10, 2020 at 5:20 am #1191692
    Ismael

    Hi,

    Thank you for the screenshot.

    This should add an arrow above the mega menu container. 

    #menu-item-128 .avia_mega_div::before {
	content: "";
	margin-left: 45%;
	border-style: solid;
	border-width: 12px 12px 12px 12px;
	border-color: transparent transparent #fff transparent;
	position: absolute;
	top: -20px;
}

    Replace 128 with the actual id of the parent menu item.

    Best regards,
    Ismael

    March 10, 2020 at 11:10 am #1191768
    raslade

    Hi Ismael

    Thanks and i’ve tried the code with my own menu id but no luck. The arrow is being cropped by the menu container. See link.

    Richard

    March 12, 2020 at 12:49 am #1192449
    Ismael

    Hi,

    We forgot to include this css code. 

    .avia_mega_div {
   overflow: visible !important;
}

    The arrow is cut off because the overflow property of the mega menu container is set to hidden by default.

    Best regards,
    Ismael

    March 12, 2020 at 9:24 am #1192520
    raslade

    Perfect, that fixes the issue and it looks great. Thanks for your help.

    Richard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Main menu dropdown container with arrow at the top’ is closed to new replies.