Change layout category widget in a page

Hey Marco,

I can’t seem to find the category widget you mentioned.
The only widgets I see are those on the footer, can you give a screenshot where it shows?

Best regards,
Nikko

Hi Marco,

Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

#top .widget_categories h3.widgettitle {
    text-align: center;
}

#top .widget_categories ul {
    display: flex;
    flex-wrap: wrap;
}

#top .widget_categories li {
    flex-grow: 1;
    width: 32%;
    float: none;
}

Best regards,
Nikko

Hi Marco,

1. I have answered it in your other thread but it’s on 1 page specifically.

2. (last box and remove bullet points) replace this code:

#top .widget_categories ul {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

#top .widget_categories li {
    flex-grow: 1;
    width: 32%;
    float: none;
    padding: 15px 15px 15px 18px;
    margin: 15px 15px 8px 0px;
    border: ridge;
    font-size: 18px;
}

with:

#top .widget_categories ul {
    display: block;
    text-align: center;
}

#top .widget_categories li {
    display: inline-block;
    width: 31%;
    float: none;
    padding: 15px 15px 15px 18px;
    margin: 15px 15px 8px 0px;
    border: ridge;
    font-size: 18px;
    box-sizing: border-box;
}

3. I could see the code if I check via page source but it’s not showing in the web inspector.
First, remove these lines that you have (css tries to read it, just use comments like /* comments*/

------------------------------------------------------------

Next, move this code to functions.php file:

/* A seguire, questo aggiunge le foto nel mega menu */
add_filter('wp_nav_menu_objects', 'avf_wp_nav_menu_objects', 10, 2);
function avf_wp_nav_menu_objects($sorted_menu_objects, $args) {

    // check menu name
    if ($args->menu->name != 'Top Menu (Italiano)') return $sorted_menu_objects;

    // edit the menu objects
    foreach ($sorted_menu_objects as $menu_object) {
        // searching for menu items linking to posts or pages
        // can add as many post types to the array
        if ( in_array($menu_object->object, array('post', 'page', 'portfolio', 'products')) ) {
            // set the title to the post_thumbnail if available
            // thumbnail size is the second parameter of get_the_post_thumbnail()
            $menu_object->title = has_post_thumbnail($menu_object->object_id) ? $menu_object->title . get_the_post_thumbnail($menu_object->object_id, 'thumbnail') : $menu_object->title;
        }
    }

    return $sorted_menu_objects;
}

I think if that’s fixed, the code I gave should work.

4. I’m not sure I understand this well, do you mean move the pics on the left and category to the right?

Can you give a link to the page where other category widgets are showing?

Best regards,
Nikko

Hi Marco,

Thanks for your kind words :)
If the function doesn’t work as expected, I think you can try to check other functions just above it if it works, because sometimes if the code on top of it has issues the code/function after it is skipped.

4. Please move text-align: center from ul to li. (will give instructions after #5)

5. Yes, I think that would be best solution, please replace this code:

#top .widget_categories h3.widgettitle {
    text-align: center;
} 

#top .widget_categories ul {
    display: block;
}


#top .widget_categories li {
    display: inline-block;
    width: 31%;
    float: none;
    padding: 15px 15px 15px 18px;
    margin: 15px 15px 8px 0px;
    border: ridge;
    font-size: 18px;
    box-sizing: border-box;
    text-align: center;
}

with:

#top.page-id-86 .container_wrap .widget_categories h3.widgettitle {
    text-align: center;
} 

#top.page-id-86 .container_wrap .widget_categories ul {
    display: block;
}


#top.page-id-86 .container_wrap .widget_categories li {
    display: inline-block;
    width: 31%;
    float: none;
    padding: 15px 15px 15px 18px;
    margin: 15px 15px 8px 0px;
    border: ridge;
    font-size: 18px;
    box-sizing: border-box;
    text-align: center;
}

Hope it helps.

Best regards,
Nikko

Hi Marco,

The code I asked to put in functions.php isn’t from me, but I discovered that it’s in a css file (most likely in Quick CSS) which will not work (including the ——).

4. It’s fixed on my end, the category boxes are left aligned, try to clear the browser cache, maybe it’s fetching some old css.

5. It’s not possible with wordpress default category widget, I think you should be able to find a plugin that has those feature, sometimes you’ll just need to tweak it with a bit of css on some plugins to get what you want to achieve.

Best regards,
Nikko

Hi Marco,

Add this css code:

@media only screen and (max-width:767px) {
  #top.page-id-86 .container_wrap .widget_categories li {
    display: block;
    width: 100%;
  }
}

Best regards,
Nikko

Hi Marco,

Can you try to place it in your child theme’s css? and try to flush out the cache.

Best regards,
Nikko

Hi Marco,

Each translation has different theme option setup, so you’ll need to add those in Quick CSS in each translation.
To place it once only, you’ll need to add it outside theme option which is usually a custom css in a child theme.

Best regards,
Nikko

Hi Marco,

I apologize it wasn’t very clear, what I meant was putting the code just once, not in every theme option for each translation.
Since it still not working, this may be due to some caching. Try to flush out cache then disable the caching plugin then check.

Best regards,
Nikko

Hi Marco,

I’m not sure why that happens, maybe you have some security plugin that’s preventing you to make changes or reverts to previous setting?

Best regards,
Nikko

Hi,

Did you need further help on this topic?

Best regards,
Jordan Shannon

Hi,

If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon