How can I achieve this?

Hey fvdwei!

This can be achieved by using custom css once you have the page up please share the link and we can provide you with basic css to achieve this list style.

It’s not clear what you need to do with the logo please share a mockup and upload to imgur.com or dropbox so we can help you better.

Cheers!
Vinay

Hey!

We are working on your ticket please wait while we update the results here soon.

To position the logo please change the max width and margin top values to suit your design.

@media only screen and (max-width: 989px) {
.responsive .logo {
    margin-top: 50px!important;
}}

To create the list items similar to the mockup please follow the steps below

First enable custom css class name support as mentioned in below links

kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

1. use a colorsection and add a custom class name to it

2. add 2 1/2 cols and icon list inside it
NOTE: The numbers need to be added in a span tag with class name “box-dark”

3. add the below css

.custom-list .iconlist_icon, .custom-list  .iconlist-timeline {
  display: none;  
}

.custom-list h4 {
background:gold;
}
.box-dark{
display:inline-block;
  min-width: 40px;
  min-height: 40px;
  line-height: 40px;
  text-align: center;
  color:#fff;
  margin-right:20px;
  background:#333;
}

Or just enable debug mode as mentioned here kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

and use the below page shortcode with the above css in step 3

[av_section min_height='' min_height_px='500px' padding='default' shadow='no-shadow' bottom_border='no-border-styling' id='' color='main_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' custom_class='custom-list']

[av_one_half first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']

[av_iconlist position='left' iconlist_styling='' custom_title_size='' custom_content_size='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border='' custom_class='']
[av_iconlist_item title='<span class="box-dark">1 </span> List Title ' link='' linktarget='' linkelement='' icon='43' font='entypo-fontello'][/av_iconlist_item]
[av_iconlist_item title='<span class="box-dark">2 </span>List Title ' link='' linktarget='' linkelement='' icon='25' font='entypo-fontello'][/av_iconlist_item]
[av_iconlist_item title='<span class="box-dark">3 </span> List Title ' link='' linktarget='' linkelement='' icon='64' font='entypo-fontello'][/av_iconlist_item]
[/av_iconlist]

[/av_one_half][av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']

[av_iconlist position='left' iconlist_styling='' custom_title_size='' custom_content_size='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border='' custom_class='']
[av_iconlist_item title='<span class="box-dark">1 </span> List Title ' link='' linktarget='' linkelement='' icon='43' font='entypo-fontello'][/av_iconlist_item]
[av_iconlist_item title='<span class="box-dark">2 </span>List Title ' link='' linktarget='' linkelement='' icon='25' font='entypo-fontello'][/av_iconlist_item]
[av_iconlist_item title='<span class="box-dark">3 </span> List Title ' link='' linktarget='' linkelement='' icon='64' font='entypo-fontello'][/av_iconlist_item]
[/av_iconlist]

[/av_one_half][/av_section]

Best regards,
Vinay

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

Hi,

this happens because you’re using this code:

@media only screen and (min-width: 2250px) {
.html_header_top.html_bottom_nav_header .main_menu {
top: 200px;
}}

Change it to something like:

@media only screen and (min-width: 2250px) {
.html_header_top.html_bottom_nav_header .main_menu {
top: -1px;
}}

Best regards,
Andy