Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 17, 2021 at 6:38 pm #1329373
    grassifrancesca

    Hi,
    I’m working on a new website and I’d like to move a bit up the dropdown menu, but mostly, change slightly the shape of the classic rectangular background.
    Is this at all possible?
    Many thanks

    November 18, 2021 at 5:43 am #1329427
    Ismael

    Hey grassifrancesca,

    Thank you for the inquiry.

    You can use this css code to adjust the vertical position of the submenu container.

    .av-main-nav > li > ul.sub-menu {
    margin-top: -20px;
}

    Please make sure to purge the cache afterwards.

    Would you mind providing a screenshot of the rectangular background, or provide a link to the site so that we can check it?

    Best regards,
    Ismael

    November 27, 2021 at 3:54 pm #1330678
    grassifrancesca

    Hi Ismael,

    Many thanks! And apologies for the late reply.
    The position is all good now, thanks for the help!
    What I’d like to adjust is the shape. I’d like to add a small triangle on the top, like an upward arrow that points at the main menu item.
    Is it possible to add that?
    I’ve shared the page and the access below.

    November 27, 2021 at 11:30 pm #1330709
    Mike

    Hi,
    Thank you for the link to your site, I believe you are looking for this:
    2021-11-27_016.jpg
    if so try this code in the General Styling ▸ Quick CSS field

    .sub-menu:before {
  position: absolute;
  top: -7px;
  left: 40%;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ffdfab;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.sub-menu:after {
  position: absolute;
  top: -6px;
  left: 40%;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffdfab;
  border-left: 6px solid transparent;
  content: '';
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    November 28, 2021 at 1:26 pm #1330737
    grassifrancesca

    This is exactly what I was looking for! Thanks a lot!!!!!

    I have another question if I can ask on this same topic.
    I’m trying to add a caption title to my Fullwidth easy slider, but I need it to be onto 2 lines.
    I’ve been trying by setting a max-width for the caption using CSS. It works, but it changes the alignment of the whole caption, plus I’m not sure it will work on different screen resolutions?
    Do you have a suggestion for this?
    Many thanks again

    November 28, 2021 at 6:55 pm #1330749
    Mike

    Hi,
    For this slider I see that you are doing width:600px; to force the word break, with a margin-left:26%; to center.
    I recommend trying width:32ch; to force the word break, CH is a width that is *close to a character width, and margin:auto; to center.
    Try this css instead of yours:

    @media only screen and (min-width: 480px) {
#top.page-id-3642 #full_slider_1 .av-slideshow-caption h1.avia-caption-title {
    width: 32ch;
    font-style: italic;
    margin: auto;
}
#top.page-id-3642 #full_slider_1 .av-slideshow-caption .avia-caption-content {
	width: 36ch;
	margin: auto;
}
}
@media only screen and (max-width: 769px) { 
	#top.page-id-3642 #full_slider_1 .slideshow_caption {
		padding: 0;
	}
}
@media only screen and (min-width: 376px) and (max-width: 479px) { 
	#top.page-id-3642 #full_slider_1 .av-slideshow-caption .avia-caption-content p {
		font-size: 20px;
		width: 100%;
		margin: auto;
	}
	#top.page-id-3642 #full_slider_1 .av-slideshow-caption h1.avia-caption-title {
		font-size: 20px!important;
		width: 32ch;
		margin: auto;
	}
}
@media only screen and (max-width: 375px) { 
	#top.page-id-3642 #full_slider_1 .av-slideshow-caption .avia-caption-content p {
		font-size: 13px;
		width: 100%;
		margin: auto;
	}
	#top.page-id-3642 #full_slider_1 .av-slideshow-caption h1.avia-caption-title {
		font-size: 15px!important;
		width: 32ch;
		margin: auto;
	}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    November 30, 2021 at 9:38 pm #1331040
    grassifrancesca

    Hi Mike,

    Many thanks for that.
    Definitely better, works perfectly.
    I have another question, but I’ll open a separate thread, so it’ll be easier to be found by others that might have the same issue.

    Thanks again!

    December 1, 2021 at 4:16 am #1331073
    Mike

    Hi,
    Glad we were able to help, and thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change shape and position for Dropdown menu’ is closed to new replies.