[Resolved] Any ninja able to replicate the left sidebars found here: https://bit.ly/3eGq8f5

[Tom]

Hello,
I’m getting a site up w/ GP Premium and I am trying to replicate the 3 left sidebar widgets found at https://bit.ly/3eGq8f5 – specifically 1) Vaccum Types (appears to be a table/stack of buttons) which then changes on a resize to buttons at the top of the page, 2) Reviews – logo w/ review text carousel that jumps to the bottom of the content body on resize, 3) Trusted and Secure – tagline and two trust logos/images which positions after #2 on resize. Is this possible and anyone interested/willing to help? I’d pay for the work of course. Thanks in advance.

[David]

Hi there,

Shouldn’t be too difficult to accomplish.
Do you have a site setup with a left sidebar with the Category / Nav widget in place ?
By default the Sidebar will stack below the content on Mobile. It will just need some CSS to hide the Category / Nav widget on mobile.

Are you using the Secondary Navigation for anything ? If not we can repurpose that for the Mobile row of buttons.

Let me know

[Tom]

Yessir, the site is here: https://bit.ly/2ysBUsM .

Not currently using the secondary navigation. Happy to try anything to tell me to do.

Also, what about how the Vacuum Types changes to bubbles/buttons on mobile? And how that Reviews widget has a carousel/slider? Any idea what to do there?

Thanks!

[David]

1. This CSS to remove the Categories widget from Sidebar on mobile:

@media (max-width: 768px) {
    #left-sidebar .widget_categories {
        display: none;
    }
}

2. Create a Category Navigation above the Content ( we can do this without using the Secondary Nav).

2.1 Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/

2.2 Add this to the Hook Content:

<?php
$cat_args = array(
	'orderby'    => 'name',
	'order'      => 'asc',
	'hide_empty' => true,
);
 
$post_categories = get_terms( 'category', $cat_args );
 
if ( ! empty( $post_categories ) ) {
    echo '<div class="post-cat-nav-container hide-on-desktop">
    <span class="post-nav-title">Categories</span>
	<ul class="post-cat-nav">';
		foreach ( $post_categories as $key => $category ) {
			printf( 
				'<li>
					<a href="%1$s">
						%2$s
					</a>
				</li>',
				get_term_link( $category ),
				$category->name
			);
		}
	echo '</ul>
	</div>';
}
?>

2.3 Select before_main_content from the hook_list
2.4 Check execute PHP
2.5 Set your Display Rules to where you want it displayed eg, Entire Site
2.6 Now add this CSS to your site:

.post-cat-nav {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
}

.post-cat-nav li {
    flex: 0 0 auto;
    margin-right: 0.5em;
}

.post-cat-nav li a {
    font-size: 15px;
    padding: 5px 12px;
    border: 1px solid;
    border-radius: 25px;
}

.post-cat-nav-container {
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
}

The Carousel Elements will require a Carousel / Slider plugin

[Tom]

Awesome – thank you!

– For the categories widget, can you point me in the right direction on how to style it similar to how they have it? They have it where it looks like a table (borders), plus background colors change on hover/active?

– For the mobile category nav, I tried what you recommended and it’s working! Thank you. How can I have the ‘Categories’ text on top and center over those categories buttons?

– Any recommendations for a slider/carousel plugin that works in a sidebar widget?

-Lastly, where can I send you at least a tip?

[David]

1. Try this CSS:

/* remove padding and add border */
#left-sidebar .widget_categories {
    padding: 0;
    border: 1px solid #ccc;
}

/* Center title and add background color */

.sidebar .widget_categories .widget-title {
    text-align: center;
    margin-bottom: 0;
    background-color: #f5f5f5;
}

/*  Add Padding and Borders to title and links */
.sidebar .widget_categories .widget-title, .sidebar .widget_categories a {
    padding: 15px 20px;
    border-bottom: 1px solid #ccc;
    display: block;
}

/* Set background of current category */
.sidebar .widget_categories li.current-cat a {
    background-color: #f5f5f5;
}

2. I edited the Hook Content Code and CSS above to add a centred title and give the container some padding.

3. Hmmm – not sure on that one – not a big slider fan.
Meta Slider is free and pretty versatile and theres the Smart Slider 3 which a lot of people like. Not sure how they behave in a sidebar though.

4. Thats very kind – we accept Coffee Donations here:

https://generatepress.com/ongoing-development/

[Tom]

Beautiful – thank you!

Your coffee has arrived!

[Tom]

🙂

[David]

Wow – thats really kind of you.
Glad to be of help.

[Author]

Posts