Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #582844

    Hi,

    I would like to achieve the required navigation icon style as per screenshot attached. I can easily do this using content box or images using Enfold for desktop view. However when viewing using mobile, the icons are stacked.

    I would like the icons to remain in 1 row like the screenshot given. (I want 6 icons x 1 row, NOT 1 icon x 6 rows).

    Desktop view: http://i.imgur.com/PTaaOiE.jpg
    Mobile view: http://i.imgur.com/68ljlfn.jpg

    Can you please advise?

    Thanks.

    • This topic was modified 8 years, 8 months ago by mhafeezmm.
    #583560

    Hey mhafeezmm!

    Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your text block element a custom class and then post the link to your page so we can provide you custom CSS code

    Cheers!
    Yigit

    #585525

    Hi Yigit,

    Sorry I was away for a few days.

    I’ve enabled the custom css function.

    Pls provide the code :) (link in private content below)

    #586591

    Hi!

    Please edit the color section which contains the icons then add a unique id in the Section ID field. Use “custom-section” for example then add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
    #custom-section .flex_column.av_one_fifth {
        float: left;
        clear: none !important;
        width: 20% !important;
    }
    }

    Best regards,
    Ismael

    #587349

    Hi Ismael!

    Thanks for your code.

    It works perfectly :)

    Just another question:

    I can see that the max number of column is 5. Can you tell me how to create 6 columns for 6 icons?

    Thanks.

    #588246

    Hi!

    100% is the width of the container which is divided by number of icons you like to have. If you like to use 6 columns the width become 16.5% in the above css ismale provided.

    Cheers!
    Vinay Kashyap

    #588372

    Hi,

    I asked because I can;t see how to get the 6 columns in the first place.

    Please refer screenshot.

    I only had 1/5 to begin with.

    Please advise.

    Screenshot: http://i.imgur.com/FWl052m.jpg

    #588554

    Hey!

    You can have up to 5 columns using the Advanced Layout Editor

    To have more columns you need to add custom class name to the 1/5 and over ride the CSS as Ismael mentioned.

    Cheers!
    Vinay Kashyap

    #588738

    Hi,

    I’m sorry I don’t quite understand what you are trying to say here.

    Can you give a little bit detailed explanation?

    Thanks.

    #588921

    Hi!

    These are the layout variations readily available

    If you need to have 6 column grid you need to add a bit of CSS code and follow the steps provided by Yigit to enable custom class support and add the custom CSS in Quick CSS.

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 8 months ago by Vinay.
    #589023

    HI,

    I finally understood what you meant.

    I added another 1/5 and changed the css to 16.5% as suggested.

    This looks like what I want on mobile but on desktop, the 6 icons is not in 1 row.

    How can I make it so that it’s 6 icons/columns in a row?

    Thanks.

    #590192

    Hey!

    I can only see 5 columns in the test page. Please add another column then we’ll provide the css code. Try this:

    #custom-section .flex_column.av_one_fifth.first {
        float: left;
        clear: none;
        margin-top: 0;
    }

    Adjust the width and margin-left value of the columns.

    Cheers!
    Ismael

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