Return to previous page

FAQ Page – Accordian Element Gaps are too far apart

This topic has 18 replies, 3 voices, and was last updated 7 months, 1 weeks ago ago by Andrew Mitchell

  • Avatar: Ajaz
    Ajaz
    Participant
    April 9, 2024 at 09:31

    .

    Please, contact administrator
    for this information.
    #390782 Copied Theme version: 9.3.4
    17 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    April 9, 2024 at 10:34

    Dear Ajaz,

    We would like to suggest an alternative solution which involves disabling the sticky header, as it currently overlaps with the accordion headlines.

    Best regards,
    The 8Theme Team

    #390813 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 9, 2024 at 10:41

    Hi Luca,

    The sticky header must remain untouched, we worked hard to get the correct settings for the sticky header, which is perfect.

    This must be achievable with the sticky header functionality enabled because it is visible on multiple sites. The example provided previously shows this is possible.

    The example is in the private content area.

    Thanks.

    Please contact administrator
    for this information.
    #390817 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 9, 2024 at 12:36

    Hi @Ajaz,

    Please add the menu anchor elements in your section, then add the following CSS codes:

    
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
     content: "";
     display:block;
     height: 77px; /* fixed header height*/
     margin: -77px 0 0; /* negative fixed header height */
     visibility: hidden;
     pointer-events: none;
}

    For more information, please take a look at this: https://element.how/elementor-menu-anchor/.

    Hope it helps!

    #390857 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 9, 2024 at 14:03

    Hi Luca,

    I don’t understand what you mean by:

    add the menu anchor elements in your section?

    When I created the anchors originally, there was a technical issue where the anchors were not linking even though I added them correctly. Your colleague investigated and created the anchors for me so I am not sure how to add them to the menu anchor.

    I have added the code to the theme custom CSS but nothing has changed.

    #390878 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 9, 2024 at 14:46

    Hi @Ajaz,

    We meant your containers NOT sections. Sorry abou this.

    Please take a look at my screenshot: https://prnt.sc/_VDkzVH7oC_f

    Best regards,
    The 8Theme Team

    #390892 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 9, 2024 at 17:02

    .

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    #390914 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 10, 2024 at 04:40

    Hi @Ajaz,

    I am confused, I have added the anchor title name for each accordion element in the container of the elements > layout > CSS ID but where do I enter the CCS Code?

    All the custom CSS codes must be placed under Theme Options > Theme Custom CSS > Global CSS.

    I have also left the accordion title anchors as they originally were, do they need to be removed? image attached to show the options I have updated in blue lines.

    Please remove the CSS ID of each container and add to the Menu Anchor Element.

    Best regards,
    The 8Theme Team

    #390940 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 11, 2024 at 13:15

    Hi Luca,

    I have removed the CCSS ID’s from all of the containers.

    I am not sure what you mean by “add to the Menu Anchor Element”. Sorry, I am a little confused, are you saying to add the anchor titles to the menu on the top left, number 1/

    The image is attached to show what I mean.
    Thanks.

    Files is visible for topic creator and
    support staff only.
    #391204 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 11, 2024 at 13:32

    Hi @Ajaz,

    We’ve checked your FAQs page and couldn’t find any Menu Anchor Elements in your page.

    Please read this artcile carefully and add the Menu Anchor Elements again: https://element.how/elementor-menu-anchor/

    Each container would have one Menu Anchor Element:

    https://prnt.sc/ONqQhBLxBXqh

    Best regards,
    The 8Theme Team

    #391210 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 11, 2024 at 17:25

    I have added anchor menus in the containers as your image shows.

    In the “ID of menu anchor” option, I have entered the menu titles e.g. #shipping, #payments, #orders, etc but this does not work?

    The alignment has also been lost.

    #391257 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 11, 2024 at 17:49

    Hi @Ajaz,

    You just need to enter: shipping, payments, #=orders and remove the # character.

    Best regards,
    The 8Theme Team

    #391262 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 11, 2024 at 18:00

    Hi Luca,

    This is what I did the first time around, nothing worked and then I added #. I have deleted # and nothing still works.

    What should be happening is, that when you click on any of the 4 menu options on the top left e.g shipping, orders, payments, or general/miscellaneous, the accordion should move towards the top of the page and aligned to the menu on the left, but this not working now.

    And the gaps between each accordion must be less than it currently is.

    Thanks.

    #391264 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 12, 2024 at 08:30

    Hi @Ajaz,

    Please double check everything carefully before reply the topics.

    We’ve checked your FAQs page and we could see that links in your menu items element are different than the ID of Menu Anchor. What you put:

    – https://3k4.a5b.myftpupload.com/faq/#shipping and Shipping
    – https://3k4.a5b.myftpupload.com/faq/#orders and Orders
    – https://3k4.a5b.myftpupload.com/faq/#payments and Payments
    – https://3k4.a5b.myftpupload.com/faq/#general and General/Miscellaneous

    We’ve already corrected it to:

    – https://3k4.a5b.myftpupload.com/faq/#shipping and shipping
    – https://3k4.a5b.myftpupload.com/faq/#orders and orders
    – https://3k4.a5b.myftpupload.com/faq/#payments and payments
    – https://3k4.a5b.myftpupload.com/faq/#general and general

    Now it’s working. Please check.

    Thanks!

    #391325 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 13, 2024 at 05:32

    This is working.

    I have aligned the top accordion with the menu on the left by adjusting the spacer height which is what I require however, when you click on any of the menus on the top left menu e.g. shipping, order, payment, etc, this takes the accordion to the top of the page which is above the menu on the top left (image attached).

    The image attached shows an orange and red line. The orange line is where the accordion is currently set.

    The red line shows where the accordion should move to and not above the top left menu.

    How can this be set so that when you click on a menu from the top left, the accordion that scrolls up remains aligned with the top left menu?

    #391518 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 13, 2024 at 07:48

    Dear Ajaz,

    We are writing to inquire about the image that was supposed to be attached to our previous correspondence. It appears that the attachment may have been omitted. Could you please check and resend the image at your earliest convenience?

    Additionally, we would like to provide some guidance on adjusting the custom CSS for your project. Please find the current CSS code below:

    
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
     content: "";
     display: block;
     height: 77px; /* fixed header height */
     margin: -77px 0 0; /* negative fixed header height */
     visibility: hidden;
     pointer-events: none;
}

    To better suit your needs, you may want to consider decreasing the value of 77px to the desired height. This adjustment should help achieve the intended visual effect on your website.

    Should you require any further assistance or have additional questions, please do not hesitate to reach out.

    Thank you for your attention to these matters. We look forward to your prompt response.

    Warm regards,
    8Theme Team.

    #391545 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 13, 2024 at 13:05

    I will leave this as it is. It is complicated to get a simple step applied.

    Thanks.

    #391575 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 13, 2024 at 13:05

    Dear Ajaz,

    In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

    Click here to share your thoughts: https://themeforest.net/downloads

    Being part of our community means a lot, and your feedback contributes immensely.

    Best Regards,
    The 8Theme Team

    #391576 Copied

  • Tagged: , , , , , ,

  • Viewing 18 results - 1 through 18 (of 18 total)

The issue related to '‘FAQ Page – Accordian Element Gaps are too far apart’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Boxed Store – WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Carwash – WordPress WooCommerce Theme
lazy-placeholder
WooPress – Responsive Creative HTML5 Template
lazy-placeholder
Furniture Store 03 – WordPress WooCommerce Theme
lazy-placeholder
Games Store – WordPress WooCommerce Theme
lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
Glasses Store – WordPress WooCommerce Theme
lazy-placeholder
Baby Shop – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.