[Resolved] Problem top bar with social icon and wp show post

[Sara]

Hi, sorry for my bad english.

I have two problems with my site:
1) in the top bar I put the social icons, but when I go into a category or on “blog” these disappear. Both if I use the bar as a widget menu and if I use it as a secondary navigation. I can’t understand what’s wrong.
2) I installed (from the Site Library) the Liberte theme which with this CSS Grid

@media (min-width: 600px) {

    body:not(.single):not(.page) .inside-article,
    .wp-show-posts-inner {
        display: grid;
        grid-template-columns: 30% auto;
    }

    .post-image,
    .entry-summary,
    .wp-show-posts-image {
        margin-top: 0;
        margin-bottom: 0;
    }

    .post-image,
    .wp-show-posts-image {
        grid-column: 1;
        grid-row: 1 / 4;
        margin-right: 1em
    }

    .entry-meta {
        grid-column: 2;
    }

    .post-image img,
    .wp-show-posts-image img {
        -o-object-fit: cover !important;
           object-fit: cover !important;
        height: 100% !important;
        vertical-align: middle;
    }
    
}

modifies the post in my home page and in blog page (with Wp Show Posts, I think). Unfortunately I also use Wp Show Posts (at the end of each article) and the images change, but I don’t want to. Is there a way to prevent them change?
– as I see it now
https://ibb.co/Bssfx1X
– how it should be
https://ibb.co/7JxvK5z

I attach the images because they are bad with English.
Thank you very much for helping,
Sara

[Tom]

Hi there,

1. You’re using icons which are loading from Elementor. On pages where Elementor doesn’t exist (categories), Font Awesome isn’t loading, so the icons break.

You’ll want to use a menu icon plugin like this: https://wordpress.org/plugins/menu-icons/

2. Try this CSS instead:

@media (min-width: 600px) {

    body:not(.single):not(.page) .inside-article,
    body:not(.single) .wp-show-posts-inner {
        display: grid;
        grid-template-columns: 30% auto;
    }

    .post-image,
    .entry-summary,
    body:not(.single) .wp-show-posts-image {
        margin-top: 0;
        margin-bottom: 0;
    }

    .post-image,
    body:not(.single) .wp-show-posts-image {
        grid-column: 1;
        grid-row: 1 / 4;
        margin-right: 1em
    }

    .entry-meta {
        grid-column: 2;
    }

    .post-image img,
    body:not(.single) .wp-show-posts-image img {
        -o-object-fit: cover !important;
           object-fit: cover !important;
        height: 100% !important;
        vertical-align: middle;
    }
    
}

Let me know 🙂

[Sara]

Yess! It works! 🙂
thank you very much!

[Tom]

You’re welcome 🙂

[Author]

Posts