First section hiding behind navbar / header on desktop view

[a_buzon]

Hello,
My first section is hiding up underneath the header/navbar, but only at screen sizes above 980px.
If I add a margin the size of my header, then of course there’s a big white space on screen sizes below 980px.

I have a standard hero banner, with a background image set for the 1st section, and then I have a V2 Headline which I want to be centered vertically. I’ve tried to achieve this by adding Gap elements above and below it, but the lower Gap disappears at 980px too.

What’s going on here?

http://dev.thehelpfulmarketer.com/

Thank you!

[Alaa]

Hello,

I recommend removing these <hr> lines you added, and control this element position with margin/padding, going with padding: 0 and margin-top, margin-bottom 15% should be enough. Or you can add this CSS code to (X > Theme Options > CSS):

.x-text.h-responsive-1 {
    margin-top: 15%;
    padding: 0;
    margin-bottom: 15%;
}

Thanks.

[a_buzon]

I’m going to quote your reply and reply to each line.

“I recommend removing these <hr> lines you added”
I don’t know what <hr> lines are, and I did not add them. Perhaps because the Renew template I chose originally had the first section as a “Header” section that was a classic element, so I added in a new section so I could add an overlay or parallax to the background if I wanted?
I took the Heading text block from the Classic section and added it to the new V2 section that’s there now.
Could the classic element have added a “hr” line? I’m not sure how to remove it, nor do I see it.

“control this element position with margin/padding”
As stated in the original message, if I add a margin to move the section out from under the navbar, then I have a white space at screen sizes below 980px.

[a_buzon]

And I think you’re assuming I’m talking about the Headline element? Based on the .h-responsive-1 class, because that only applies to my Headline box.
I’m talking about the entire section.
The ENTIRE first section is up under the Navbar until you get down to a screen size of 980px, then it sits flush with the navbar like it should.

I think I see what you’re saying about the 2nd issue I’m having - I will use a % margin to get it centered instead of gaps.

Still need help with the first and main issue though.

[friech]

Hi There,

This is the custom CSS that causing the issue:

@media(min-width: 980px) {
.home .x-main.full {
	margin-top: -120px !important;
}}

You can see this under Theme Options > CSS

Please remove this block if its not necessary or clarify what was the intended effect when you added this so we can formulate an alternative.

Thanks,

[a_buzon]

Oh my god… I’m so dumb. Thank you.
I had been trying different CSS to get the topbar and navbar to both be fixed and finally gave up because I couldn’t get the logo and navbar to shink and not jump and that line must have been left behind.

It’s odd that X/Cornerstone has 3 different places for custom CSS…

1. the CSS in Cornerstone on the leftside menu ( called “Content CSS” which I assume is just that Page’s CSS?)
2. then Theme Options also has CSS on the leftside menu for the Global CSS
3. then there’s yet another from Appearances->Customize which has both an “Additional CSS” tab AND a “Custom” tab - but that at least links back to the Global. Not sure what “Additional CSS” is.
   Then, of course the child theme…

Is there any documentation for X-theme CC best-practices for when to use “Additional CSS” vs Global vs your child theme?

[christopher]

Hi there,

As you mentioned we have a section to apply CSS code for the whole website and that is in the X > Theme Options > CSS.

You can also add the CSS code on a page per page basis, by accessing the Cornerstone for that page and clicking on the CSS button at the left side.

The Appearance > Customizer acts exactly like the X > Theme Options and it will be deprecated soon. It was the old way we had the options and we recommend that you do not use that. For more information:

Note about Theme Options and the Customizer

Thank you.