Iam new to ghost CMS and I have start to do a travel blog 
. Currently Iam using edition theme. In navigation bar I need to add “Destination” drop down and then I need to add destinations. ( I have attached a sample photo what I want). When a reader go to the corresponding destination post belongs to that destination should be loaded. Could you someone help me on this. How can I do this.
Maybe this helps. Not tested, it´s for Source theme:
1 Like
For source theme it’s work 100%.
Not sure about other themes.
Thank you for your reply 
. I created as you mentioned here. But the problem is when I click Categories → Tutorials (As your code) 404 page not found error is coming. If I created a page then how can I add my current blog posts to relevant category. shall we think I have wrote a blog post about North America. Now the blog post already can see in my home page. In my category I have North America and South America sub sections. So how to add that post t0 North America when I click Category → North America .
You are right AnimaVillis. It works also in other theme (Edition, …)
<script>
document.addEventListener('DOMContentLoaded', function() {
var mainCategories = document.querySelectorAll('.nav-destinations');
mainCategories.forEach(function(mainCategory) {
var dropdownContent = mainCategory.querySelector('.dropdown-content');
if (!dropdownContent) {
dropdownContent = document.createElement('div');
dropdownContent.className = 'dropdown-content';
mainCategory.appendChild(dropdownContent);
}
var subCategories = mainCategory.parentNode.querySelectorAll('[class^="nav-destinations-"]');
subCategories.forEach(function(subCategory) {
if (!subCategory.classList.contains('dropdown-content')) {
var categoryName = subCategory.textContent.replace('Destinations-', '');
var newLink = document.createElement('a');
newLink.href = subCategory.querySelector('a').href;
newLink.textContent = categoryName;
dropdownContent.appendChild(newLink);
subCategory.style.display = 'none';
}
});
});
});
</script>
<style>
.nav .nav-destinations .dropdown-content {
display: none;
position: absolute;
background-color: #000;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.nav .nav-destinations:hover .dropdown-content {
display: block;
}
.nav .nav-destinations .dropdown-content a {
color: #fff;
padding: 12px 16px;
display: block;
}
</style>
1 Like
Thank you soo much. this is working on edition theme as well. Thank you again for your effort on concerning this. There is a small issue. If you can, could you please give me a solution. as I attached on picture there is a white box showing when I click three dots which is in right side.
Yes, I can see. The problem is:
If you resize the window, the dropdown menu does’t work any more… until you refresh the page.
Maybe AnimaVillis has any idea.
I’ll think about that…
After resize
1 Like
Maybe you need a more complex solution:
Or search topic in the forum: “Dropdown Menu”
1 Like
ah Thats the reason. You are great. Thank you soo much kindly helping me on this. I dont have much knowledge with these code stuffs. I will try to find a solution using the link you provided. Thank you very much. 