Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Paul Roberts
Paul Roberts
7,928 Points

Bootstrap to Wordpress Navigation Menu problem

Hey there,

I've created a website using Bootstrap, but I'm currently attempting to convert it to a WordPress theme. Everything is going well, but I've hit a brick wall with dropdown navigation. In Zac's video:

https://teamtreehouse.com/library/from-bootstrap-to-wordpress-theme/setup-a-bootstrap-theme/adding-ability-for-dropdown-navigation

He doesn't full explain how to do it, but links to some code from the project downloads folder. When I manage to get that code to look like the rest of my site it doesn't look good in the mobile view...

Is there an easy way to style dropdown menus from WordPress? Or perhaps a plugin or other Framework than Bootstrap?

Thanks in advance for any answers :)

1 Answer

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Paul. To do this properly, you would need to extend WordPress's walker class to properly display Bootstrap's dropdown navigation menus. Thankfully, however, there is a Github repo here that has done the heavy lifting for us. It requires adding the bootstrap-navwalker file to your directory and adding some code to your functions.php file, but it's pretty well explained in the documentation. Take a look and see if you can get it working! :)

Paul Roberts
Paul Roberts
7,928 Points

Hi Ryan! I already tried this before and it completely broke my site! However, I managed to find a video on youtube about it and realised that you can't right click and save the "wp_bootstrap_navwalker.php" directly. You actually have to download the zip and extract it properly. It seems to be working much better now. Thanks for pointing me back in the right direction!

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

You're welcome! I struggled a bit to get it working, too, the first time I used it, but then I realized I had forgotten to change the walker class name in another part of the file after about an hour of head-scratching. Felt pretty sill for a few minutes! XD

Paul Roberts
Paul Roberts
7,928 Points

Hi Ryan, There is ONE thing I'm struggling with. I simply can't work out how to change the font colour of the active drop down menu's header. So I have the dropdown menu, but when you're viewing a page within that dropdown menu, the dropdown toggle button's background changes colour correctly but I can't get the font colour to change too. Does that make sense?

Basically, outside of WordPress, I can just give the dropdown the classes "dropdown active" as well as the current <li> with "active" to change both font colours to white. But can't work it out with the Walker Class.

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

I kind of struggled with this, too, and it looks like from the WP documentation you can change this (to add 'active' to the current menu item), but I just went ahead and overrode the CSS. With Bootstrap, you have to be really specific to change stuff, but here's what I used (this is SCSS):

.main-nav {

    > .current-menu-item > a,
    > .current_page_parent > a,
    .open > a {
        background: darken($base-yellow, 20%);
        color: $white;
    }
}

Basically, make sure you start at the top element of your nav menu and be really specific (using >) and you should have no problems changing stuff.