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
Ruben Cartuyvels
234 PointsCustom Bootstrap navigation bar in Wordpress
I want to make a submenu, which shows as an entire bar when its parent item is active, but doesn't show at all when its parent item is not active. It would be some kind of synthesis between a bootstrap collapsible and a drop-down menu, if you know what I mean :D. Kind of like you see in the pictures, but then the sub-menu bar should be pulled to the left side of the screen. I also don't think my coding solution is too elegant :-). I basically just transformed the drop-down menu from the tutorial videos.
I tried to add the 'pull left' class, I tried to add all kinds of CSS styles to the .sub-menu class,... But nothing worked well. I know I could just manually translate the specific sub menu a certain number of pixels to the left, but that won't be a generally applicable solution, as is required in a theme.
Part of why I can't figure this out, is of course because the sub menu isn't hard coded in the .php template files, so it's harder to select and apply changes to.
I hope my explanation is sufficient, and would be very grateful if you'd try to help me!
1 Answer
Christopher Rebacz
10,904 PointsWordpress Nav Menus are definitely a special use case. You will need to have the html output modified to match bootstrap if you want to use the bootstrap classes. Wordpress gives you a way to do this using a custom nav walker, which is a class that can be added to modify menu output in a more customized way. Creating a walker is not the easiest thing to do...however, there is a bootstrap walker that you can use available called wp bootstrap nav walker. The github readme file does a great job of explaining how you would use it. Basically you need to make it available in your theme via your functions.php and then include it when you register your nav menu. This will give you the markup you need, which will make it a lot easier to style the way you want.