Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 20, 2024 at 11:47 am #1434885
    jscarlett

    I am redesigning a website and needed to create a dropdown list from a button on the homepage: ‘OFFERS’

    The two buttons above are how I would like the third ‘OFFERS’ button to look, with the arrow to the left but the arrow is at the top.

    The dropdown list on the button seems okay, but how do I get the arrow to be on the left of the text like the other buttons please?

    Thanks

    February 20, 2024 at 3:12 pm #1434909
    jscarlett

    Here is the html.

    February 20, 2024 at 3:14 pm #1434910
    jscarlett

    And here is the css

    February 21, 2024 at 5:47 am #1434957
    Ismael

    Hi,

    Thank you for the inquiry.

    You can add this css code to align the icon with the button text. 

    .av-4nzmkd-57f4e8124b72523d6b91c72c00871e26 + .avia_codeblock_section .avia_codeblock .dropdown {
    display: flex;
    min-height: 48px;
    justify-content: center;
}

.av-4nzmkd-57f4e8124b72523d6b91c72c00871e26 + .avia_codeblock_section .avia_codeblock .dropdown .avia_button_icon {
    padding-left: 0;
    margin-right: 10px;
}

    Best regards,
    Ismael

    February 21, 2024 at 1:12 pm #1435027
    jscarlett

    Hi Ismael

    Thank you that’s brilliant! But it only works for desktop – not on mobile.

    Is there something I can add for the mobile version please?

    I also need to made the button look like the other buttons above and have reduced the depth but also need to change the spacing above and within the button.

    I will keep working on the spacing, but any other direction you can give will be much appreciated!

    Thanks

    Jane

    February 22, 2024 at 6:46 am #1435086
    Ismael

    Hi,

    Thank you for the update.

    Did you create another button for mobile view? You may need to adjust the side padding of the button to make room for the icon and text.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .dropdown {
    padding: 10px 20px;
  }
}

    Best regards,
    Ismael

    March 7, 2024 at 1:20 pm #1436617
    jscarlett

    Hi Ismael,

    I have deleted the other button that I was using for mobile view and have changed some information on the homepage but this has stopped your code from working.

    I cannot see how to change it so that it works again.

    Please can you help?

    The website is still under development and has been migrated to a new location below.

    A reminder about the problem:
    On the homepage, the two buttons ‘BOOK TICKETS’ and ‘BOOK A PARTY’ are how I would like the third ‘OFFERS’ button to look, with the arrow to the left but the arrow is at the top.
    The dropdown list on the button seems okay, but how do I get the arrow to be on the left of the text like the other buttons please?

    Thanks

    Jane

    March 8, 2024 at 7:22 am #1436695
    Ismael

    Hi,

    Thank you for the update.

    We get an error when we visit the site:

    NET::ERR_CERT_COMMON_NAME_INVALID

    Please contact your hosting provider and ask them to renew the SSL certificate. We’ll check the site again once the the certificate is renewed.

    Best regards,
    Ismael

    March 8, 2024 at 10:57 am #1436724
    jscarlett

    It does not have an SSL cert because it is currently being developed on the 360playuk.co.uk url to replace the live website at 360play.co.uk which does have a ssl cert.

    Does it need a ssl cert for only a couple of weeks?

    March 9, 2024 at 11:52 am #1436800
    jscarlett

    It has an ssl cert now, so please can you look again?

    Thanks

    March 11, 2024 at 9:08 am #1436927
    Ismael

    Hi,

    Thank you for the update.

    You can use this css code to adjust the style of the button.

    #top .hr.hr-invisible.av-2d6n9il-41fb061c500273b2b0ba4e2d011be596 + .avia_codeblock_section .avia_codeblock .dropdown {
    display: flex;
    min-height: 48px;
    justify-content: center;
}

#top .hr.hr-invisible.av-2d6n9il-41fb061c500273b2b0ba4e2d011be596 + .avia_codeblock_section .avia_codeblock .dropdown .avia_button_icon {
    padding-left: 0;
    margin-right: 10px;
}

    If you want to target the text block element directly, try to apply a unique css class name to it. Please check the link below for more info:

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Best regards,
    Ismael

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