Hi, i am using revolution slider on the homepage and i would like to have the header transparent over the slider so that the image I am using is the same for the slider and the header. Thanks.
Hi Mark,
Thank you for writing in, please add this to Theme Options > CSS, this will bring your header on top of the slider (first section)
.masthead.masthead-inline {
position: absolute;
top: 0;
left: 0;
right: 0;
}
Add this as well if you want to remove that white bottom border in the header.
.masthead.masthead-inline .x-navbar {
border-width: 0;
}
Lastly, zero out the top margin of your first section (where the slider is placed)
Hope it helps,
Cheers!
We are delighted to assist you with this.
Cheers!
@friech, also how can I take out those white borders on the drop down menu which appears when the browser is smaller or on mobile device?
Hi Mark,
In that case, please update the second block of CSS I’ve provided to this:
.masthead.masthead-inline .x-navbar,
.masthead.masthead-inline .x-navbar .mobile .x-nav li>a {
border-width: 0;
}
Cheers!
Hi @friech thanks again! It worked of course 
Today I have decided to give cornerstone another go as revolution slider is a steep learning curve and too many controls to tweak… for full height sections I found this post https://theme.co/apex/forum/t/creating-full-height-sections-that-are-vertically-centered-in-pro/50098 when applying justinlosh’s code it worked but I found that the header disappears upwards when using the menu button on smaller sized screens/browsers. Can you help with this? Many thanks.
Hi @MarkJagdev,
Please try Friech’s recommendation on that thread, it’s to make sure it doesn’t take effect on mobile views. I checked and confirm that you implemented the same way as Justin
Thanks!
Hey thanks @Rad ! I just wasn’t sure what the flex-row thing was but it works. On the full height sections It looks like it works well for section 2 but section 1 carries on slightly lower than it should. How can I make it fit exactly to the size of the screen without reducing the size of the other sections? Many thanks all.
Hi Mark,
I still don’t see the recommended CSS applied, all I could see are sections with ID of flex-row if that’s that you’re referring then it doesn’t do anything. But if you really don’t wish to have that CSS then make sure your section’s height is set to calc(100vh - 75px); instead of just 100vh.
The 75px is the height of your header to make sure the full-height section doesn’t bleed outside the current window’s height.
Thanks!
Hi @Rad, I applied the css to the front page css rather than the theme options as I didn’t want the member login or blog page to be effected.
Apologies I am quite a newbie to css and not quite getting my head around it. I would appreciate if someone could take a look at what I entered in my front page content ccs section and theme options css and recommend what to do next to achieve the above i.e. each section exactly fitting the full screen size on all devices including the first section which appears to be affected by the header (but maybe something else as well?) …
Hi Mark,
No problem, it can be Theme Options > CSS or Page CSS, same CSS changes and recommendation should be applied. Have you changed the height as recommended?
You can also provide your admin login credentials in the secure note and we’ll check
Thanks!
Hi Mark,
I went ahead and applied the change, it’s just calc(100vh - 75px) and you don’t need the custom CSS provided from another thread since the initial intention is to make all section to full-screen of the current page.
Thanks!
Hi @MarkJagdev,
I’ve added this element CSS to your section #1, please double check:
$el {
height: calc(100vh - 75px) !important;
}
I’ve also removed the margin of section #1, and replaced with the padding instead.
Let us know how it goes!
Glad we were able to help
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.