Splitting up blog posts by category

Hi there! My website has a blog section with all posts within it. I have created categories that I can tag for each individual blog but I want to add the option to go to each individual category when readers are navigating from the home page? I have attached a screenshot and circled the part I’m talking about. How am I able to make this a drop down where you can pick based on category? But still leave ‘blog’ as an option to click that has all of them in one? 

Hi,

Can you send screenshot + site url? I don't see any screenshots.

Higlobetravel.net 

Ah yes, you can add a dropdown, then we can use code to force "Blog" dropdown title clickable.

What do you think?

You can share site url, I will give you code.

That would be AMAZING thank you @tuanphan 

So a dropdown will allow it to say ?

BLOG (the dropdown title and main blog joint page) THEN categories below 
Destinations
Travel Tips
Travel Tales 

https://www.higlobetravel.net

23 hours ago, higlobe said:

That would be AMAZING thank you @tuanphan 

So a dropdown will allow it to say ?

BLOG (the dropdown title and main blog joint page) THEN categories below 
Destinations
Travel Tips
Travel Tales 

 

https://www.higlobetravel.net

Yes. You can create. In case you don't know how to, let me know, I will do a quick video guide.

@tuanphan That would be greatly appreciated! 

Are you looking to do something like this? Tuanphan helped me design the look of my dropdown with a bit of code which you can see here. My blog is quite large and I created categories using a second blog page to search for posts on the main blog page. Try it out. 

https://www.derricksrandomviews.com/blogsummary

Thanks for sharing @derricksrandomviews the drop down menu looks great!! 

To make title clickable, you can follow these steps.

Here I test code on my site, you can do similar on your site.

Suppose we need to make "Packages" title clickable to new url.

#1. First, you need to know this.

#2. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
	$('div.header-nav-item:nth-child(2)>a').click(function() {
		window.location = "https://google.com";
	});
});
</script>

Replace Google with your desired url

#3. Note
This code runs on Desktop Only. If you need code for mobile, you can comment below, I will adjust the code for your case.

Thank you so much @tuanphan I would definitely be interested in the coding needed for mobile as well! 

20 hours ago, higlobe said:

Thank you so much @tuanphan I would definitely be interested in the coding needed for mobile as well! 

By default, when clicking Title >> It will open a box with Subitems

If make Title clickable >> this box won't appear.

You can check and let me know, if you still want to continue, I will give code.

Hi @tuanphan I am interested in the Mobile code / function too - thank you!

On 9/3/2024 at 6:05 PM, nicoleholgate said:

Hi @tuanphan I am interested in the Mobile code / function too - thank you!

Use this new code for both desktop - mobile. Note: each site will require a different code, this code for site in top comment

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
	$('div.header-nav-item:nth-child(2)>a, .header-menu-nav-wrapper>div:nth-child(2)>a').click(function() {
		window.location = "https://google.com";
	});
});
</script>

Hi, I too am having this issue and would like the code for both desktop and mobile.  I have several menu options that will need multiple dropdowns.

17 hours ago, jamesontag said:

Hi, I too am having this issue and would like the code for both desktop and mobile.  I have several menu options that will need multiple dropdowns.

You can share site url, we can check easier