Customising the post overview (archives?) page

Hi there,

is it possible to see the current archive page on your site ?

I haven’t really started building it yet so it’s pretty much default GP template. You can view here: capturelifejournal.co.uk

Ok - so you can design the post article template using a Block Element - Content Template:

https://docs.generatepress.com/article/block-element-content-template/

The aside navigation in your design is that specific to the archive page or the entire site /

It’s specific to the archive page👍🏾

hmmm.... not sure on that one. What will happen to it on smaller screen devices ?

On mobile devices, the tag navigation aside will be at the bottom of the screen, similar to what is currently set up for recent posts on smaller screens. Will the content template element not work if specific to archive page?

Just realised that there are only four element options:Block, Hook, Layout,Header - where is the content template element?

Hi there,

Content template is one kind of block element: https://docs.generatepress.com/article/block-element-content-template/

Will the content template element not work if specific to archive page?

You can specify it to display on certain archive page or all archive pages.

On mobile devices, the tag navigation aside will be at the bottom of the screen

So it's more like a site footer? Where will this side navigation to be on non-archive pages?

Hi Ying, since conmmunicating last, I've made some progress - pls see:https://www.capturelifejournal.co.uk/journal/

The only thing I couldn't do was position the site logo and nav bar when I merged it - the header overlapped with the main section. I tried creating a custom header with an element to achieve this. Also, if you compare the design with the version found in the url above, you'll see I also couldn't make the left side bar extend to the top of the page.

If you could help with those, I would be greatful.

Hum.. try this CSS:

.archive header#masthead, .blog header#masthead {
    width: 75%;
    margin-right: 0;
}
.archive div#page, .blog div#page {
    margin-top: -147px;
}
.archive .site-content .content-area, .blog .site-content .content-area {
    padding-top: 147px;
}

Wow, that actually worked- you're a boss! The navigation links are overlapping though- how do I get it to wrap?

Just checked at 3820px wide; the code breaks at that width. If the container that holds divs with the classes you targeted can be constrained to 1920px, it'll be perfect. How did you find relevant class?

Change this CSS :

.archive header#masthead, .blog header#masthead {
    width: 75%;
    margin-right: 0;
}

to:

.archive .inside-header.grid-container, .blog .inside-header.grid-container {
    max-width: 75%;
    margin-right: 0;
}

How did you find relevant class

You'll need to learn how to use browser inspector (developer tool).
For more info: https://developer.chrome.com/docs/devtools/

I do use the inspector tools, quite a lot, but didn't find the classes you targeted - I guess I still have more to learn.

The navigation links are overlapping though

Any thoughts on how to solve this?
Thanks for your time.

Any thoughts on how to solve this?

I've provided solution in my last reply, have you tried it?

If I misunderstand your question, let me know!

I have provided the link for the screenshot below - it describes better what I'm taking about.