[Support request] How to improve navigation and clarity about content available?

Hi there,

we can’t really answer that, my personal opinion is that the Slideout site is not the right design for your site. If users need greater visibility of the site structure and to find related posts then a more traditional site header and sidebar would make more sense.

David suggested using a sidebar layout to replace the slideout navigation which would alter the layout of your page – you can test it out:
https://docs.generatepress.com/article/sidebar-layout-overview/

I’m sure you understand what I’m looking for: Keeping that exact layout for my post while getting a greater visibility of the site structure.

I’m not sure how it’s possible to keep the exact layout while improving some aspects of it?
As David mentioned, this isn’t something we can answer.

If you can find an exact example of what you are looking for then we can point you in the right direction.

You can also take a look at the templates under the Blog filter for inspiration and see which one works for you the best:
https://generatepress.com/site-library/

Hope this helps.

Just to confirm, are you now aiming to replicate the example header and removed the slideout system currently in place?
https://www.screencast.com/t/MAwJcjp9

Hi Nicolas,

Would you be open to using a different template as suggested by David?

I think starting from templates Classic or Tasty could be easiest for the structure you want to achieve.

Reference:

https://gpsites.co/classic/
https://gpsites.co/tasty/

If you’re open to this or not, let us know.

Ok so modifying the existing layout into the example header you’ve provided will take some steps – I would recommend doing this in a staging site if this is a live site with traffic.

The first step would be to remove this CSS from the Additional CSS field in the customizer:

@media (min-width: 769px) {
	body {
		padding-left: 60px;
	}
	#site-navigation .navigation-branding {
    margin: 10px 0 auto;
}
.main-title {
    writing-mode: vertical-lr;
}
}

#site-navigation {
	position: fixed;
	left: 0;
	min-height: 100vh;
	max-width: 60px;
	overflow: hidden;
}

#site-navigation .inside-navigation {
	flex-direction: column;
	flex-wrap: nowrap;
	min-height: 100vh;
}

.admin-bar #site-navigation .inside-navigation {
	min-height: calc(100vh - 32px);
}

#content {
	padding: 40px;
}

#main,
.sidebar > .inside-right-sidebar,
.sidebar > .inside-left-sidebar{
	margin-top: 0;
	margin-bottom: 0;
}

#site-navigation .main-nav > ul {
	flex-direction: column;
}

.menu-bar-items {
	order: -10;
}

#site-navigation .rotate {
	transform: rotate(90deg);
	margin-bottom: auto;
	white-space: nowrap;
}

@media (max-width: 768px) {
	#site-navigation .menu-toggle {
		display: none;
	}
}

.site-footer {
  padding: 0 40px;
}

Let me know when this is done 🙂