Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • October 2, 2020 at 7:26 pm #1250193
    mikeens

    Hello,

    I am building a website and I am hoping to have a section with 1/2 columns side by side that are offset like the following website link. I like that they start at a different point and that the columns do not line up at the top of each new section but are “offset” to be higher on the left hand side. Is there a way to do this effect with columns in enfold?

    http://acme-world.com/services

    Thanks,

    Mikenna

    October 3, 2020 at 6:46 am #1250271
    Jordan Shannon

    Hey mikeens,

    This should be possible with a bit of css. Can you provide a link to the site/page in question so we can look into this further?

    Best regards,
    Jordan Shannon

    October 4, 2020 at 6:49 pm #1250454
    mikeens

    Hello Jordan,

    I have provided this login to the site below as we have a placeholder up right now. It is the services page we are looking to achieve this effect for.

    Thanks,

    October 4, 2020 at 6:56 pm #1250456
    mikeens

    Hello Jordan,

    When you are looking at the site could you also take a look and let me know why all of the icons are appearing as square boxes instead of icons?

    Thanks,

    October 6, 2020 at 5:25 am #1250687
    Rikard

    Hi,

    Thanks for that. I had a look at your Services page and it look like you have achieved something similar to the example site you linked to. Could you try to explain a bit further what you need help with please? If you have screenshots or a mockup of what you are trying to achieve then that would help.

    Icons; they are being blocked by the browser since they are being served via CDN, see private. Please try reaching out to your CDN provider to see if they can provide you with headers which will allow the icon font file to load.

    Best regards,
    Rikard

    October 6, 2020 at 5:45 am #1250692
    mikeens

    Hi Rikard,

    I am looking to have the columns on the left side and on the right side be touching each other without the gaps between due to them starting at the top of the column beside it. If you look at the sample site the left hand side will do a column with content and then the image below it will be touching the bottom of that column same with the right side. This allows the left side of columns to flow nicely and the right side of columns to start slightly below the top starting point of the left hand side and also flow nicely together on that side.

    If you look at our services page the first two columns start are aligned at the top but we would like to stagger them for the right and side to start slightly below the left hand side.

    If you also look at lets say the first image on the left hand side of our site it stops and then you get a break where you see the background before the second column on the left hand side starts as it needs to be inline with the second column on the right hand side. We would like to remove these spaces and have the columns on the left hand side and the columns on the right hand side always touching each other without the space for the background to create a nice staggered effect of the columns.

    I have attached some screenshots with red circles of the spacing we would like to eliminate.

    Thanks,

    October 13, 2020 at 5:36 pm #1252574
    mikeens

    Hello,

    I am wondering if there is a solution to resolve this?

    Thanks,

    October 18, 2020 at 10:32 pm #1253716
    Mike

    Hi,
    Sorry for the very late reply, I took a look at your services page and it seems different than your screenshots, did you end up changing your layout?
    I also didn’t see any test page, are you still trying to do this?

    Best regards,
    Mike

    October 19, 2020 at 3:15 pm #1253998
    mikeens
    This reply has been marked as private.
    October 20, 2020 at 1:13 pm #1254356
    Rikard

    Hi,

    Thanks for the update. If you want to override the transparency setting on individual pages, then you would have to use custom CSS. Here’s an example for your About page:

    .page-id-84 ul#avia-menu .avia-menu-text {
  color: red;
}

    Best regards,
    Rikard

    October 29, 2020 at 9:40 pm #1256877
    mikeens

    Thank you Rikard. Could you tell me how to achieve this if I am displaying the menu as an icon instead of text?

    October 30, 2020 at 1:14 pm #1257043
    Mike

    Hi,
    This question seems to be very similar to another thread of yours here, am I correct?
    I tested Rikard’s css for your menu link colors on the “About” page with an added !important; and it changes the menu text color to red, as the example suggests:

    .page-id-84 ul#avia-menu .avia-menu-text {
  color: red !important;
}

    In the other thread you also wanted to swap the logo image for that page, so did that thread help?
    If not please explain so we can assist.

    Best regards,
    Mike

    October 30, 2020 at 4:36 pm #1257073
    mikeens

    Hi Mike,

    Yes it is similar to that sorry I mixed the threads up!

    I am looking to change the menu icon on a transparent header page not the text. Please see the link to the website below where I use this format instead. I would like to change the 3 bar icon to different colors on different pages if that is possible.

    Thanks,

    October 31, 2020 at 11:12 am #1257224
    Mike

    Hi,
    Thank you for the feedback, in this example the /about/ page is “page-id-16” & the /services/ page is “page-id-20”.
    So the css would look like this:

    #top.page-id-16 .av_header_transparency div .av-hamburger-inner, 
#top.page-id-16 .av_header_transparency div .av-hamburger-inner::before, 
#top.page-id-16 .av_header_transparency div .av-hamburger-inner::after {
    background: red !important;
}
#top.page-id-20 .av_header_transparency div .av-hamburger-inner, 
#top.page-id-20 .av_header_transparency div .av-hamburger-inner::before, 
#top.page-id-20 .av_header_transparency div .av-hamburger-inner::after {
    background: blue !important;
}

    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field, and then clear your browser cache and any cache plugin, and check.
    Please feel free to adjust the color to suit.

    Best regards,
    Mike

    October 31, 2020 at 4:43 pm #1257243
    mikeens

    Hi Mike.

    Thanks this worked great!

    October 31, 2020 at 5:35 pm #1257256
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Offset Columns’ is closed to new replies.