Header and Archive page design

Hi there,

can you share a link to your site - so i can see the current layout, points 1 and 3 should be easy enough but point 2 ... not sure.

Hi David,
It is hosted on local server yet. Can you please confirm how can design like this referring the website which I want to make.

https://www.techrounder.com/

Yes - that site is using GP so you can definitely use GP to make it.

1. It's using this CSS of for the header shadow:

.site-header, #mobile-header .inside-navigation {
    box-shadow: 0px 3px 2px 0px rgb(0 0 0 / 3%), 0 1px 0 0 rgb(0 0 0 / 4%), 0 -1px 0 0 rgb(0 0 0 / 4%);
}

2. Seperator line:

.home .content-area .site-main .post, .archive .content-area .site-main .post, .search .content-area .site-main .post {
    border-bottom: 1px solid #efefef;
}

3. Set it to 3 columns first:
https://docs.generatepress.com/article/using-columns-in-the-blog/

Then please link us to the page in question.

Thanks!

Thanks Leo,

I'm converting my website from local to online server and will come to you for help in a day.

Regards,
Sachin

Sounds good.

Hi Leo,

I have implemented given CSS in Customizing>>Additional CSS for for header shadow and separator line but haven't seen any changes in website.

My website is live now and sharing URL below for for post design Link: https://drive.google.com/file/d/1MyQMWYl61AhxfGQRLg9jSQHkn_la9J7j/view

What I want to achieve.

Your site layout is fundamentally different to that example site.

1. For the shadow below the header - you need this CSS:

.main-navigation {
    box-shadow: 0px 3px 2px 0px rgb(0 0 0 / 3%), 0 1px 0 0 rgb(0 0 0 / 4%), 0 -1px 0 0 rgb(0 0 0 / 4%);
}

2. For the border, the above CSS should work, but you can use this:

body:not(.single) .post {
    border-bottom: 1px solid #efefef;
}

But you will need to:

1. Set the Customizer > Layout > Container --> Structure to One Container.
2. Set the Customizer > Colors > Body && > Content to the same background color.
3. Remove this CSS in the Customizer > Additional CSS that is adding the shadows around your posts and widgets:

.inside-article, .sidebar .widget, .comments-area {
    border-right: 2px solid rgba(0, 0, 0, 0.07);
    border-bottom: 2px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

Hi David- Thanks for your response.

Your site layout is fundamentally different to that example site>> It is same one and made on Generate press same template.

I applied CSS shared by you and guide but box shadow got interrupted due to "One Container"

Can you please have look again and guide me. Example website which i want to get: https://www.techrounder.com/

It would be great if we connect for the same.

If you think that I can't achieve same layout. Request you to please guide me to get refund.

Regards,
Sachin

Let's take a step back and take care of one thing at a time.

Can you first deactivate the navigation as a header option in your site:
https://docs.generatepress.com/article/navigation-as-a-header/

Set the top/bottom header paddings to 6px and left/right header paddings to 40px:
https://docs.generatepress.com/article/header-padding/

And navigation location to float right:
https://docs.generatepress.com/article/navigation-location/

Remove this CSS from David:

.main-navigation {
    box-shadow: 0px 3px 2px 0px rgb(0 0 0 / 3%), 0 1px 0 0 rgb(0 0 0 / 4%), 0 -1px 0 0 rgb(0 0 0 / 4%);
}

Then add my CSS:

.site-header, #mobile-header .inside-navigation {
    box-shadow: 0px 3px 2px 0px rgb(0 0 0 / 3%), 0 1px 0 0 rgb(0 0 0 / 4%), 0 -1px 0 0 rgb(0 0 0 / 4%);
}

Let me know when this is done.

Thanks Leo, I achieved what i wanted to get in header section.

Can you please let me know for the post customization and separator line?

Remove this CSS:

.inside-article, .sidebar .widget, .comments-area {
    border-right: 2px solid rgba(0, 0, 0, 0.07);
    border-bottom: 2px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 10px rgb(232 234 237 / 50%);
}

And add this CSS:

.blog .content-area .site-main .post, .archive .content-area .site-main .post, .search .content-area .site-main .post {
    border-bottom: 1px solid #efefef;
}

Yesssss.... Separator line added and some design also has changed...

Please have a look once https://suggestit.in/

Last one Archive design.

Regards,
Sachin

Switch from separate container to one container:
https://docs.generatepress.com/article/content-layout/

Thanks one more time.

Two thing:

01. Radius in featured image.
02. When I am scrolling up my website logo is disturbing and shifting to left and sometime it is not appearing too.

Regards,
Sachin