- This topic has 15 replies, 4 voices, and was last updated 1 month, 1 week ago by
Ying.
-
AuthorPosts
-
October 14, 2022 at 2:59 pm #2373952
Gillian
Is it possible to have a different sidebar for just one category of posts? I have my main navigation menu set as the Primary Menu which appears in my right sidebar and I want to have a different menu in different colours when the user is looking at just one category of posts.
October 14, 2022 at 3:45 pm #2373976Ying
StaffCustomer SupportHi Gillian,
You can use a plugin like conditional menus.
But you will need custom CSS to set different menu colors for that category.
October 14, 2022 at 11:08 pm #2374088Gillian
Hi Ying
Tried to use the conditional menus plugin and it didn’t have any effect. I also tried Content Aware Sidebar and no matter how I set it I got the second menu appearing with the main menu on all pages and posts.
The site is 3churches.uk and the post I am trying to add a different menu to is https://3churches.uk/pcc-church-community-contacts-flitton/ which has category set to flitton and I chose category flitton for the conditional menu.
My primary menu is called Main Menu, and the one I want to show with the post is called Flitton Menu
October 15, 2022 at 4:21 am #2374255David
StaffCustomer SupportHi there,
can i see a post where you want to make the menu change ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 15, 2022 at 4:23 am #2374259Gillian
This is a post with category flitton and it is showing the main menu, not the flitton menu which should only have 2 items on it.
October 15, 2022 at 4:49 am #2374272David
StaffCustomer SupportTry adding this PHP Snippet to your site:
add_filter( 'wp_nav_menu_args', function ( $args ) { if ( 'primary' === $args['theme_location'] ) { if ( in_category('your post category') ) { $args['menu'] = 'Name of category specific menu'; } } return $args; } );
You need to update:
your post category
to match the name of the category you want to make the change on.
Name of category specific menu
to match the name of the category specific menuDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 15, 2022 at 5:39 am #2374322Gillian
That’s worked – thank you for such a quick response.
I’ve tried it with adding a second category which also needs a different menu and repeated the whole Snippet with the second set of information and that has worked fine as well.
I need to alter the colours of the alternative menus.
I’ve set the primary navigation menu colours in the Customiser and then used the following code to get the button effect.
/* -------------------- SECTION 3 - NAVIGATION ----------------------------------- */ /* MAIN NAVIGATION IS SET TO SHOW IN SIDE BAR VIA GENERATEPRESS This gives the main nav the appearance of buttons */ .main-nav a { margin-bottom: 10% !important; text-align: center !important; border:solid #6600cc 2px; border-radius: 26px; background-color: #f2e6ff; } /* This reduces the spacing between lines in the buttons when the wording is wrapped */ .main-navigation .main-nav li a { line-height: normal !important; } /* --------- End ----------- */
and this is working on both the Main Menu and the Flitton Menu. What would my selector be for the Flitton Menu so I can over-ride the colours set in the customiser?
Or would I be better off not setting the main colours in the Customiser but setting them with some CSS for each menu?
(This is all a temporary fix until I can redo the whole site – I’m hoping to use GenerateBlocks and drop Elementor, but I have to get up to speed on how to use blocks)
October 16, 2022 at 3:56 am #2375036David
StaffCustomer SupportSo on the example page, where we see the new category specific menu. Will ALL the menu items be a different color ? Or will it just be some of those items?
In the meantime:
1. Keep your colors in the customizer, we can use CSS to overwrite those category specific menu items.
2. add this PHP Snippet to your site:
add_filter( 'body_class', function( $classes ) { if ( is_single() ) { global $post; foreach( ( get_the_category( $post->ID ) ) as $category ) { $classes[] = 'category-' . $category->category_nicename; } } return $classes; } );
This will add a
category-{term}
class to thebody
tag of all single posts.
This we can then use to write CSS specifically for posts of particular category.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 16, 2022 at 4:23 am #2375056Gillian
Hi David
Basically, I have 4 colour combinations.
The default colours for the sidebar menu will be the purple/light purple colours you are currently seeing.
For posts that are category flitton, all the menu items in the sidebar will be two shades of blue
I’ve got 2 more post categories to deal with. For category silsoe all the menu items will be 2 shades of red and for category pulloxhill all the menu items will be 2 shades of green (you can see the colour combos on the buttons in the header)
You’re being very helpful – many thanks.
October 16, 2022 at 6:52 am #2375175David
StaffCustomer SupportOK, so if you can add the snippet i provided here:
Then we will have the category body class we need.
So if you’re happy overriding the menu colors using CSS then:1. Add this CSS:
.main-navigation { --nav-color-one: #6600cc; --nav-color-two: #f2e6ff; } .main-navigation .main-nav ul li a { color: var(--nav-color-one); } .main-nav a { border: solid var(--nav-color-one) 2px; background-color: var(--nav-color-two); } .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--nav-color-two); background-color: var(--nav-color-one); }
In doing so you should see no change to your current menu colors.
The clever part here is this part of this CSS:
.main-navigation { --nav-color-one: #6600cc; --nav-color-two: #f2e6ff; }
If in the future you want to change your menu colors you will change those two hex colors.
What we are doing here is storing your hex colors as CSS Variables.2. Now we can change the color variables values based on our category class eg.
.category-flitton .main-navigation { --nav-color-one: #ff0000; --nav-color-two: #00ff00; }
So any post that has the
category-flitton
will load new colors.you can then add multiple CSS rule for each different style you want eg.
.category-another-category .main-navigation { --nav-color-one: #0000ff; --nav-color-two: #00ff00; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 16, 2022 at 7:10 am #2375193Gillian
Thank you so much – that works. I’ve just got to tweak the first bit of CSS because the active flitton page is shows up in the purple colours.
October 16, 2022 at 7:59 am #2375360David
StaffCustomer SupportDoh – i missed that.
I updated the CSS above, the change being this rule:.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a { color: var(--nav-color-two); background-color: var(--nav-color-one); }
is changed to:
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--nav-color-two); background-color: var(--nav-color-one); }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 16, 2022 at 8:05 am #2375368Gillian
I’m a very happy bunny – works a treat. Thank you. I’ve updated my GeneratePress review – just to say that 5 years on support is still 5*
October 16, 2022 at 8:39 am #2375403David
StaffCustomer SupportThank you – it means a lot – very happy to have helped 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 22, 2023 at 12:38 pm #2543131Heinrich
hi david, a really cool solution. i need this thing not for posts, instead for pages. how can i adress the pages, because there are no categories?
would you add a custom taxonomie or or better another way?
tks in advance
-
AuthorPosts
- You must be logged in to reply to this topic.