Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1413618

    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

    #1413803

    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

    #1413846

    Hi Ismael,

    Thank you so much for your prompt reply.

    The code works great!

    Best regards,

    #1413953

    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

    #1414638

    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.

    #1414961

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

    Best regards,
    Mike

    #1415080

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

    #1415083

    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

    #1415135

    Thanks. It works!

    #1415186

    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

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