[Jackcoldrick]

Awesome, Thanks for your feedback 🙂

[Jackcoldrick]

Hi All,

Just wanted to say don’t worry about answering this (unless you’ve a better solution). I managed to fix my issue. For anyone who might want to achieve the same thing I did the following:

1. Added a full row and set it to “content full width”
2. Inside this row I added 2 custom HTML components and set them to 6 columns so they display side by side
3. I then removed the padding from the spb_content_element by adding a class to the row and targeting as follows:

.my-custom-row-class .spb_content_element.col-sm-6.spb_raw_html {
    padding: 0;
}

4. Finally remove all margin and padding from the parent row and you end up with 2 columns side by side, full width with a custom BG colour.

[Jackcoldrick]

That’s great thank you for the help

[Jackcoldrick]

thanks

[Jackcoldrick]

Hey Kyle,

This is pretty much resolved, but just before I mark it off. I decided to edit the responsive.css file directly, obviously the down side to doing that is if I update the theme I’ll lose the changes but If I’m aware of that I can just back up the css file before updating and add it back in after the update.

Are you aware of any other potential problems this might cause? I just find it easier then going into the custom css panel on the dashboard.

Thanks,
J

[Jackcoldrick]

Hi Kyle,

That’s great thanks, however I noticed in the parent theme there is a responsive.css file that seems to be overriding anything I put into style.css…

Is that normal behaviour?

Thanks,
j

[Jackcoldrick]

Hi Guys,

Just to let you know I managed to implement this in the following way, for anyone who might be trying to achieve something similar:

1. Create your Mega Menu
2. Add a Custom Link to the Menu
3. Assign it a class in the “CSS Classes” option
4. Add following CSS:

.testmenu.menu-item.menu-item-type-custom.menu-item-object-custom.mega-unit.mega-hdr.last {
width: 100%;
max-height: 50px;
}

That worked for me. I can then input any custom HTML I would like into the Menu as well from the “Custom HTML” Option.

[Jackcoldrick]

This reply has been marked as private.

[Jackcoldrick]

That doesn’t work David, I’ve got multiple portfolio categories to display. By default it selects all of them

[Jackcoldrick]

Hey Rui,

Site is not active, but for an example it would be like this page:

Portfolio – Full Width Masonry (Gallery)

I tried applying the selected class to the li in question but it only changes background colour. It doesn’t update the list of portfolio items unless a click event is detected.

[Jackcoldrick]

Hi Guys,

I appreciate you getting back to me, this does indeed hide the “all” filter, however if someone navigates to the page by default all the items are shown. Perhaps I didn’t phrase the question correctly but ideally by default it wouldn’t show “all” the items either, just the first items in the list, which in the case of the above link was Graphic Design items.

Does that make sense?

[Jackcoldrick]

Thank you!

[Jackcoldrick]

Thanks for the help guys. That worked fine.

[Jackcoldrick]

Hi Rui,

screenshot is attached.

I’d like to keep the crease.svg which appears in bg there all the time. I believe the sf-hover class is responsible for this.

Attachments:

You must be logged in to view attached files.

[Jackcoldrick]

Hi Rui,

Yes I want it to constantly be on hover state. I don’t have a link as the site isn’t live yet.