Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 14, 2016 at 7:08 am #582844
    mhafeezmm

    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, 9 months ago by mhafeezmm.
    February 15, 2016 at 4:45 pm #583560
    Yigit

    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

    February 18, 2016 at 5:37 pm #585525
    mhafeezmm

    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)

    February 21, 2016 at 7:01 am #586591
    Ismael

    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

    February 22, 2016 at 6:11 pm #587349
    mhafeezmm

    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.

    February 24, 2016 at 9:28 am #588246
    Vinay

    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

    February 24, 2016 at 2:15 pm #588372
    mhafeezmm

    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

    February 24, 2016 at 5:59 pm #588554
    Vinay

    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

    February 25, 2016 at 5:19 am #588738
    mhafeezmm

    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.

    February 25, 2016 at 11:21 am #588921
    Vinay

    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, 9 months ago by Vinay.
    February 25, 2016 at 1:09 pm #589023
    mhafeezmm

    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.

    February 27, 2016 at 8:49 am #590192
    Ismael

    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

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