[Peter CParticipant]

Hi,

I have a semi-transparent header, that I would like to overlap the next section down in Cornerstone… So you can see the section image bg behind the header.

I tried adding a negative top margin to the section below the header, but it moved the section way up.

How would I go about doing this in cornerstone???

http://vitamixcontest.develophealth.com/about/

[Rue NelModerator]

Hello There,

Thanks for writing in!

Please remove your negative top margin to the section. Simply go to your customizer, Appearance > Customize > Header > Navbar > Navbar Top Height (px) and change it to 1px or 0. You will see the result in the preview area.

Please let us know if this works out for you.

[Peter CParticipant]

great thanks!

1) How can I keep this setup when the screen goes to mobile?

[ThaiModerator]

Hi There,

Try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 979px){
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0px;
}
}

Hope it helps.

[Peter CParticipant]

Great… Now last question 🙂

How would I bump down the main blog and posts?

http://vitamixcontest.develophealth.com/blog/

http://vitamixcontest.develophealth.com/wordpress-resources-at-siteground/

[ThaiModerator]

Hi There,

Please try the following code:

body.blog .x-navbar-wrap,
body.single-post .x-navbar-wrap {
    height: auto;
}
@media (max-width: 979px){
    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: 0px;
    }
    body.blog .x-navbar-wrap,
    body.single-post .x-navbar-wrap {
        height: auto;
    }
}

[Peter CParticipant]

So, I changed my navbar from fixed to static and now the header no longer overlaps.

Why is this? and how can I make it overlap with a static top?

http://vitamixcontest.develophealth.com/about/

[John EzraMember]

Hi there,

Thanks for updating the thread! This is because when you switch from fixed to static it will change the class selector of the navbar, rendering the previous code unusable. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.masthead .x-navbar {
    background: transparent!important;
}

header.masthead.masthead-inline {
    margin-bottom: -50px;
}

@media (max-width: 979px){
    .x-navbar-wrap {
        height: 0px;
    }
    body.blog .x-navbar-wrap,
    body.single-post .x-navbar-wrap {
        height: auto;
    }
    header.masthead.masthead-inline {
        margin-bottom: 0px;
    }
}

Hope this helps – thanks!

[Peter CParticipant]

Thanks!

So I decided to keep it as a fixed top…

But something weird is happening on the top spacing on the blog and blog post pages.

When the page loads, all looks good, but if you scroll to the bottom of the page and go back up, the top spacing goes away!

http://vitamixcontest.develophealth.com/wordpress-resources-at-siteground/
http://vitamixcontest.develophealth.com/blog/

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

body.blog .x-navbar-wrap, body.single-post .x-navbar-wrap {
    height: auto;
    min-height: 60px;
}

Hope it helps.

[Peter CParticipant]

perfect thanks!

What exactly is the min-height doing to accomplish this?

[ChristopherModerator]

You’re welcome

It doesn’t let the wrapper to be smaller than specific value (60px) to prevent the overlapping issue.

[Author]

Posts