-
AuthorPosts
-
February 14, 2016 at 7:08 am #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.jpgCan you please advise?
Thanks.
- This topic was modified 8 years, 8 months ago by mhafeezmm.
February 15, 2016 at 4:45 pm #583560Hey 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!
YigitFebruary 18, 2016 at 5:37 pm #585525Hi 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 #586591Hi!
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,
IsmaelFebruary 22, 2016 at 6:11 pm #587349Hi 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 #588246Hi!
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 KashyapFebruary 24, 2016 at 2:15 pm #588372Hi,
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 #588554Hey!
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 KashyapFebruary 25, 2016 at 5:19 am #588738Hi,
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 #588921Hi!
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.
February 25, 2016 at 1:09 pm #589023HI,
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 -
AuthorPosts
- You must be logged in to reply to this topic.