Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 18, 2023 at 4:45 pm #1413618
    Ben

    Hello Enfold Support Team,

    Firstly, let me take a moment to compliment you on the fantastic job you’ve done creating the Enfold theme. Its power, flexibility, and user-friendly approach make it an absolute pleasure to use. Thank you!

    I am reaching out today to seek some advice on an adjustment I am hoping to make on my website. Currently, the portfolio category sorter is displayed as a horizontal line. While this is elegant, it doesn’t exactly meet my requirements for a specific project. I was wondering if there is a way to display the portfolio categories and their nested sub-categories in a vertical arrangement, somewhat like a list, with each category/sub-category positioned one above the other.

    In addition to this, I would also like to inquire about the possibility of having this vertically arranged portfolio category sorter displayed in the sidebar when viewed on a desktop. On mobile, I would prefer for it to be positioned above the portfolio content. Is there an option, or could you guide me towards a workaround, to achieve this kind of display arrangement?

    Thank you for considering my request, and for your continuous efforts in making Enfold such a versatile theme.

    Looking forward to hearing from you soon.

    Best regards,

    Ben

    July 20, 2023 at 9:19 am #1413803
    Ismael

    Hey Ben,

    Thank you for the inquiry.

    To modify the style of the portfolio categories, please include the following CSS code. This will arrange the sorting items vertically and position the sort container beside the portfolio items, creating a sidebar.

    @media only screen and (min-width: 767px) {
    #top .avia-fullwidth-portfolio .sort_width_container {
        float: left;
        width: 20%;
    }

    #top .grid-sort-container {
        width: 80%;
        float: left;
        clear: none;
    }

    #top .avia-fullwidth-portfolio #js_sort_items a {
        display: block;
        text-align: left;
    }

    #top .avia-fullwidth-portfolio #js_sort_items .text-sep {
        display: none;
    }
}

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect. By disabling the file compression settings, you will be able to make the necessary adjustments and updates without any conflicts. Once you have made the required modifications, you can re-enable the file compression settings to optimize the performance of your website.

    Thank you for using the theme and for the kind words.

    Best regards,
    Ismael

    July 20, 2023 at 4:03 pm #1413846
    Ben

    Hi Ismael,

    Thank you so much for your prompt reply.

    The code works great!

    Best regards,

    July 21, 2023 at 12:40 pm #1413953
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    July 27, 2023 at 10:30 am #1414638
    HenkN

    This looks helpfull for me too. But question: how can I achive this for the portfolio grid item? Portfolio grid item with vertical filter options beside the portfolio grid.

    July 30, 2023 at 8:08 pm #1414961
    Mike

    Hi,
    This also works for the portfolio grid
    Enfold_Support_2755.jpeg

    Best regards,
    Mike

    July 31, 2023 at 6:33 pm #1415080
    HenkN

    I added the CSS, but it’s not working. Same layout with filter above the portfolio grid. What do I miss?

    July 31, 2023 at 6:52 pm #1415083
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (min-width: 767px) {
    #top #av-sc-portfolio-1 .sort_width_container {
        float: left;
        width: 20%;
    }

    #top #av-sc-portfolio-1 .grid-sort-container {
        width: 80%;
        float: left;
        clear: none;
    }

    #top #av-sc-portfolio-1 #js_sort_items a {
        display: block;
        text-align: left;
        width: 100%;
    }

    #top #av-sc-portfolio-1 #js_sort_items .text-sep {
        display: none;
    }
}

    After applying the css, please clear your browser cache and check.
    The expected results:
    Enfold_Support_2772.jpeg

    Best regards,
    Mike

    August 1, 2023 at 12:25 pm #1415135
    HenkN

    Thanks. It works!

    August 1, 2023 at 5:34 pm #1415186
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Display portfolio categories one above the other’ is closed to new replies.