Bootstrap (the framework, not just the-bootstrap theme) doesn’t do menus like most WordPress themes do menus. It gets into the whole touch-centric devices realm where there is no hover, only click. The practical result is, you can’t have a link on the top-level of a drop-down or Bootstrap (and therefore the-bootstrap) will assume you want to go to that link when you hit the top-level.
You have several options within a Bootstrap-based theme that doesn’t rewrite Bootstrap’s menu behavior.
1) You can have a top-level link that goes to the blog page, but with no drop-downs because Bootstrap is touch-friendly and will never show them.
2) You can build a custom menu in the Dashboard (make the top-level blog item a custom link to #) and add each post you want under the blog menu item there. This seems like a lot of maintenance.
3) You can use a custom home page with a section listing blog posts or a carousel to make the latest blog posts visible on the home page.
4) You can try to work around Bootstrap by enabling hover on the menus, but then touch device users won’t be able to use your site properly. I saw a recent study from a major research firm that said over 50% of internet users use a touch device (tablet or smartphone) for at least some of their internet access. Do you really want to alienate all those people?
There may be a few other options like a featured posts widget or something else to draw attention to key posts.
On the one hand, the menu thing is my main Bootstrap peeve. On the other, when I test menus on a WordPress site from my phone, doing it the old WordPress way doesn’t work, the Bootstrap way does work. Given the way tablets and smartphones are overtaking PCs as internet access devices, I’m designing my site and menus to work well for both touch and mouse users within the boundaries of the Bootstrap way.
