[Support request] Creating a full width landing page in Sider theme

[Jaumark]

How can I create a full width landing page in the ‘Sider’ theme?

[Fernando]

Hi Jaumark,

For Slider theme, the Header is set to display at the side like a sidebar through a code located in Appearance > Customize > Additional CSS.

You can add something like body:not(.home) to the code if you want to exclude the Blog page which is the home page for instance.

Example:

Replace this:

.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 300px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}

With this:

	body:not(.home) .site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 300px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}

Note that I just added body:not(.home) as mentioned. You may also replace .home with for instance .page-id-73 wherein 73 is the id of the page.

How to get the id: https://share.getcloudapp.com/X6uEj0zg

So you can for instance exclude a specific page from the CSS code like:

body:not(.page-id-73 ) .inside-header {
  flex: 1;
  flex-direction: column;
}

Try excluding the specific page you wish to have a full with on codes that include classes related to the header like .site-header, .main-navigation etc.

Hope this clarifies. Feel free to reach out if further assistance is needed. 🙂

[Author]

Posts