[proximomktgParticipant]

I am trying to emulate the design of this site: http://www.veteransunited.com/va-loans/.

We want to be able to have a full width slider, with the content boxed and overlaying the slider a bit. I know this might be a lot to ask, but I have been killing myself playing with the CSS to try and get this and I just can’t.

Here is the site: http://sagamore.proximomktg.com/

I am using the Renew stack,

I also want to know if there is a way to move the page title on the x-header-landmark up and having some other text reside below that.

Thanks in advance for your help.

[MrinalMember]

Hi Will,

You can create this kind layout by adding Gap element in both side using VC of that page or adding the following CSS via Appearance > Customize > Custom > CSS:

.home .x-main.full {
    margin: 0 auto !important;
    width: 80% !important;
}

I’m not clear about your second requirement, you can hide page title for a page & then add landmark element again on a page using your own text.

[proximomktgParticipant]

Perhaps you don’t understand what I am asking for, but the suggested addition to CSS did not do anything for me. To be more clear, I would like the header and slider to span the width of the page, but the main content to be boxed with a visible line running down either side of the page.

As for my second request, I was hoping to add rounded corners to the top of a content band.

Thanks

[RadModerator]

Hi Will,

I’m not sure if I understand it correctly but you already have a full-width header, slider, and footer. And a boxed (restricted width) content.

Or are you referring to add visible section or boundaries to boxed content? Or make the content overlap with slider?

If yes, then try adding this too.

.home .entry-content.content {
max-width: 80%;
margin: 0 auto;
margin-top: -90px;
position: relative;
background: #fff;
z-index: 99999;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}

Please clear your plugin cache, or disable it temporarily. Else, you will not see any changes.

Thank you.

[aeropaymanParticipant]

I know I’m answering this a year after the post, but I found another solution to this problem for anyone else who reads this. This is using the renew stack but should be the same for others.

1. Install layer slider and create a full width slider.
2. In Cornerstone go to the settings cog and enable the slider below masthead option.
3. In Customizer, under the name of the stack you selected, make the navbar/logobar transparent by moving the opacity slider in the color selector to 0. This is only necessary if you want a transparent navbar over the slider.
4. In customizer, go to custom, and css and add:

.x-slider-container{
margin-top: -100px; /*change this to the height of your navbar. You can delete this if you don’t want a transparent navbar*/
}
.x-main{
margin-top: -60px; /*how much you want the boxed content to overlap the slider*/
background-color: white;
z-index: 5000;
}

This should achieve an effect like this:
http://www.signiferstudios.com/wordpress

[Rue NelModerator]

Hello @aeropayman,

Thanks for sharing this information. This is very much helpful to other X theme users.
We really appreciate it.

Thank you.

[Author]

Posts