I am creating a main splash page before displaying portfolio and was wondering if there is a away to hide some elements like logo and burger menu. I tried hiding via css using page id, visibility hidden, and works in the preview mode, but on the live site it stays hidden on all pages.
Any thoughts on how to accomplish this would be greatly appreciated.
Ajax page transitions will load the target page content container within the original page. Since the target page is not loaded normally the <head> and <body> elements will stay the same.
This is why you cannot use the unique page element class ID that is stored in <body>
The solution is to disable ajax and then prefix the CSS styles with the class ID of the page you want to apply for
I am creating a main splash page before displaying portfolio and was wondering if there is a away to hide some elements like logo and burger menu. I tried hiding via css using page id, visibility hidden, and works in the preview mode, but on the live site it stays hidden on all pages.
Any thoughts on how to accomplish this would be greatly appreciated.
Thanks!
Hello Bobby,
Ajax page transitions will load the target page content container within the original page. Since the target page is not loaded normally the <head> and <body> elements will stay the same.
This is why you cannot use the unique page element class ID that is stored in <body>
The solution is to disable ajax and then prefix the CSS styles with the class ID of the page you want to apply for
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Here is the code I used in the Additional CSS under Customize:
.page-id-2089 #logo img {
visibility: hidden;
}
.page-id-2089 #burger-wrapper {
visibility: hidden;
}
.page-id-2089 .page-action-wrap {
visibility: hidden;
}
.page-id-2089 footer {
visibility: hidden;
}
And it works in the preview, but when I look at the site live it hides it on all pages, not just 2089.
Should I move this code to Theme Editor? And how can I find the file if this is the default theme template?
Also how to disable ajax?
Here is the page that I am referring to: http://mariawretblad.com
All I am trying to do is add a main splash page to enter before viewing the portfolio. Here it is in WordPress: https://jmp.sh/lM2Qbiy
Thanks!
Hi Bobby
you can disable ajax in appearance -> theme options then you will have access to the unique page class id.
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio