Section below above header

[abdurrehman]

Hi there!

How to move the section with Pro below the header? The green header below the transparent header.

See attachment.

Thanks in advance!

[Joao]

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

• Link to your site
• WordPress Admin username / password

All the best!

[abdurrehman]

Hi there!

Sorry the screenshot I’ve shared is from the dev site on localhost but I have made a staging site where you can check this. Please find the login credentials in the secure note.

Thanks in advance

Best regards,
Abd Ur Rehman

[rahul]

Hey @abdurrehman,

In your website all I can see is A header, one empty section and a footer. I am unable to understand what you are trying to achieve.

Let me guess there are 2 sections and all you want to do is swap those 2 sections right? You can simply drag and drop those sections.

Regards

[abdurrehman]

Hi, Raul!

Thanks for your reply!

I’m trying to move the section (if you see in the preview area) that section is starting right below the header, you got that? I want to make that starting right below from where header starts and like a full-width section. Here’s an example what I’m trying to achieve.

Please let me know if still, I’m unable to explain myself.

Thanks!

[ruenel]

Hello There,

Thank you for the clarifications. It seems that you want to have a fixed header. The section would be behind the header when you view the page. To do that, all you have to do is to edit your header and set it to position as absolute. http://prntscr.com/fv3r3m

And then you will have this layout: http://prntscr.com/fv3rpn

Hope this helps.

[abdurrehman]

Hey, RueNel!

Thanks yeah! This is what I was trying to achieve.

Thank you so much!

[nabeel]

Glad we could help.

Cheers!

[abdurrehman]

Hey there!

Is there any way to make this only to the one page or specified page? Because make that this way applies to all pages and the blog page elements (Search breadcrumb etc) goes below that doesn’t look well.

Thoughts?

[nabeel]

Hi again,

You can do it with CSS, if you want have that layout on homepage only then you can use the following code in your Customizer:

body:not(.home) .x-bar-absolute {
  position: relative !important;
}

Similarly you can use page ID’s to include or exclude the effect in the same way. To find page / post ID’s please see https://www.ostraining.com/blog/wordpress/how-to-find-the-page-id-in-wordpress/

Hope this helps!

[abdurrehman]

Hi again,

Thank you for your reply!

I added this code but that didn’t hide. Would you mind explaining this CSS, please? I mean how that’s targeting home? For example for blog page how that will be? Will that be like .blog or what? Or I’ll have to replace that with page ID?

Many thanks!

[nabeel]

Hi again,

I checked your site and the code wasn’t there, I went ahead and added the code and it’s working as expected. That layout is only applicable on homepage now, your other pages are displaying normally as you can see your blog page now.

Above code is removing the effect from all the pages except your home page. If you want to target your blog page you can use .blog selector. For other pages you’ll need the page ID’s for example for your Contact Us page, you’ll use the code like this:

body:not(.page-id-29) .x-bar-absolute {
  position: relative !important;
}

The above code if for excluding the effect your pages with the page ID Or if you want to include the effect on this page too, then use it like this:

body.page-id-29 .x-bar-absolute {
  position: absolute !important;
}

Hope this helps!

[abdurrehman]

Hi, Nabeel!

Thank you so much for checking that. I’m sorry for the delay, I was quite busy at work.

BTW, I tried that code on my personal site that right now I’m just remaking that and hadn’t shared over this ticket. I’ll try this and will get back to you in that doesn’t work.

Much appreciated your time!

Best regards from Barcelona

[nabeel]

Glad we could help.

Cheers!