[Resolved] Some Customization needed

Hi there,

Let’s handle one question at a time and per topic:
https://www.screencast.com/t/BUPtnINQm

Which parts are you referring to here?

If it’s the layout of the posts, then the best solution would be to use the query loop block in the upcoming GenerateBlocks 1.5 which is currently in beta testing:
https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/

Hi Rohan,

To remove the Menu Label, Kindly go to Appearance > Customize > Layout > Primary Navigation, then leave the Mobile Menu Label blank.

To clarify, the reference site you have has its Menu at the left, and the search icon at the right, is this the one you’re going for?

If so, here is a code you may add in Appearance > Customize > Additional CSS:

.site-logo.mobile-header-logo {
    position:absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
}

#mobile-header .menu-toggle {
    order: -1;
    margin-right: auto;
}

Otherwise, try this:

.site-logo.mobile-header-logo {
    position:absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
}

#mobile-header .mobile-bar-items {
    margin-right: auto;
}

Kindly let us know how it goes, and we’ll proceed with your next inquiry.

You may try adding the following code in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .main-navigation .mobile-bar-items a {
        font-size: 24px;
    }

    button.menu-toggle span.gp-icon.icon-menu-bars {
        font-size: 24px;
    }
}

With regards to the placement of the date on single posts, here is another CSS you may try adding:

body.single div.entry-meta {
    display: flex;
    flex-direction: column;
}

body.single div.entry-meta span.posted-on {
    margin-left: 30px;
}

Hope this helps!

I see.

I edited the second code above: https://generatepress.com/forums/topic/some-customization-needed/#post-2238803

Kindly try using that instead.

This is how it should look like with the new code: https://share.getcloudapp.com/nOuXpP5v

I see.

Kindly try adding this PHP:

add_filter( 'generate_post_date_output','tu_add_to_post_date' );
function tu_add_to_post_date( $output ) {
    return '<span class="date-label">Updated on </span>' . $output;
}

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Then, update the CSS to something like this:

body.single-post span.byline a[rel="author"]::before {
    content:"By ";
    text-decoration: underline;
    color: #f5f7fa;
    text-decoration-color: #ff409d;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
    text-underline-position: under;
}

body.single-post div.entry-meta {
    display: flex;
    flex-direction: column;
}

body.single-post div.entry-meta span.posted-on {
    margin-left: 30px;
}

Hope this helps!

You’re welcome!

Are you using WP Rocket? You can try adding ?nowprocket at the end and see how the loading changes. It may have something to do with your optimization.

Or, if you test your website in https://pagespeed.web.dev/ you’ll see improvements you can work on which may positively affect your site’s loading speed.

Hope this clarifies!