[Nico ColluParticipant]

Hey there!

I have all the latest installed FYI! 🙂
Website: http://www.nicocollu.com/

I’ve CSS’d my Nav to overlay above all content so that background images can shine through my open opacity nav.

Thing is though that now a 70px padding has been removed and I’m unaware of how to re-introduce that 70px or whatever padding I wish WITHOUT moving the background-image down so that the white background is shown.

The problem is best seen when conducting a search whereas you see the text behind the Nav.

Is there a way to fix this where I can set a custom CSS padding/margin for all the columns/content except for the background?

Maybe each first column/row has an ID/Class everytime it’s created?

Looking forward to hear your suggestions!

/ Nico Collu

[Rue NelModerator]

Hello There,

Thanks for writing in! To resolve this issue, please update your custom css code:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0!important;
    margin-bottom: 0;
}

And make use this code instead:

body.x-navbar-fixed-top-active.page-template .x-navbar-wrap {
    height: 0!important;
    margin-bottom: 0;
}

Please let us know if this works out for you.

[Nico ColluParticipant]

Hey!

That fix didn’t work for me, unfortunately!

I’m in doubt as to whether you understand what I am trying to achieve considering your recommendation to me.

The NavBar is exactly as it should be.

The problem is that the content needs to be moved down a minimum of 70px as the navbar USUALLY would do but it’s not doing due to my height change.

Still, the background-image must never be moved down, only the actual content!

There must be consistent classes or ID’s to target content whereas it’d be easy to just put a CSS change to that class/ID?

[ChristianModerator]

For that, you will need to add more top padding to your section to push the content down. If you want to apply this site-wide to all first sections, please add the code below in your Appearance > Customize > Custom > Global CSS

#x-section-1 {
padding-top: 100px !important;
}

Alternatively, you can add a class to your section and change #x-section-1 with your class.

Thanks.

[Nico ColluParticipant]

Hey Christian!

Works perfectly, obviously…

I’m guessing that whatever I do on a newly created page/post that the first ID for content is always #x-section-1, correct? Thereby, even if I put a custom ID, there is no need to worry since x-section-1 will always be an ID attributed as well, no?

[ChristianModerator]

Yes, x-section-1 is auto-generated when the ID field is blank.

Thanks.

[Nico ColluParticipant]

Hey Christian,

We’ve run into a problem which is as follows:

Once x-section-1 is used, it is ALSO used to put 70px padding below a featured image in a blog post which separates the content from the featured image/header section which I then cannot change due to the !important already being used once.

Is there another CSS/ID that can be used which solely affects what I am looking for?

[ChristianModerator]

In that case, you should go with adding a class to your section as said previously.

Alternatively, you can add a class to your section and change #x-section-1 with your class.

If that still doesn’t help, it would be best to hire a third party developer to work closely with you.

Thanks.

[Nico ColluParticipant]

Hey Christian!

The worry with this is that I’ll have to manually add it every time.

Maybe you can tell me which file includes the class for pages, not posts and thereby I can add an extra class to CSS?

[Nabeel AModerator]

Hi again,

Classes are added by WordPress dynamically to the pages, one way to add your own class can be with JavaScript which is outside the scope of support we can offer. Use the class field and add the class manually wherever is needed.

Thanks!

[Nico ColluParticipant]

Hey Nabeel!

I think we are still at a simple CSS solution which just hasn’t been found yet.

The first option isn’t working since it pushing down the content of posts and doesn’t push down the content of a search or category page.

The only way this code works is for the 2 static pages.

I’m looking to have CSS’ing that I can have in my child theme CSS so that I can set & forget.

Any other options?

[Rue NelModerator]

Hello There,

Do you want to move down the content area by 70 pixels right below your navbar? To do it in all other pages, you can use this page:

.site .x-main {
    padding-top: 70px !important;
}

You might need to remove the previous css you may have added.

Hope this helps.

[Nico ColluParticipant]

Hell Rue Nel,

This doesn’t work as the background image is pushed down as well.
The point is to have the background image of a page visible behind the navbar while the content doesn’t disappear behind the navbar so everything except the background needs to be pushed down.

[LelyModerator]

Hi There,

Something like this should work on the search page:

.search .x-header-landmark {
    padding-top: 100px;
}

Then something like this for pages:

.page #x-section-1 {
padding-top: 100px !important;
}

Hope this helps.

[Nico ColluParticipant]

Hey Lely, thanks for your response.

The Search/Category pages can be solved with your suggestion!

About the other, I was using the following before:

.page #x-section-1 {
padding-top: 100px !important;
}

But it introduces a problem whereas the content of a single post gets pushed down instead of just the entry-header.
I COULD change the CSS targeting but unfortunately both pages and posts equally have the same CSS assignation so it’s difficult to target a page and post separately.

Do you know of a fix for this?

[Author]

Posts