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

WordPress

Posted by David Reid
David Reid
19,691 Points

Wordpress/Bootstrap Menu

Hi! I am building a site for a guy I know but I've run into some difficulty with the nav menu. I am working with Wordpress and a bootstrap starter theme called _tk. It uses bootstrap 3. I am fighting with the mobile menu. When I press the "hamburger" the mobile menu comes down with a transparent background but I don't want the transparent background on the parent container. I want to menu to be down over the mast slider to push the content down. At the minute it is appearing over another background.

You can see for yourself at reido.co.uk/netsolv. Any answers are appreciated. :)

David

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Hi David, so I know exactly what you're looking for - is this what you're hoping to achieve? Menu hidden | Menu revealed

David Reid
David Reid
19,691 Points

Hey Joel! Sorry for the late reply! That is very close to what I am looking for!

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

There were just two css styles I changed to get it to look like that. If you want to use them yourself as a starting point, feel free.

To remove the semi-transparent background on the navigation, update the following styles in your css file: style.css (line 710, @(max-width: 1196px)) & style.css (line 648, @(max-width: 649px))

.site-navigation {
    background-color: rgba(0, 0, 0, 0.5); /* Set to none or comment out/remove this line completely */
}

Bear in mind the above may be located in a .scss file if that's what your theme is using.

To increase the size of the header section to accommodate the revealed menu, update the following rule for .site-header like this: style.css (line 275)

.site-header {
    height: auto; /* Currently set to 175px; */
    min-height: 175px; /* Keeps it looking the same as before until the hamburger menu is activated. */

    /* any other styles for this section can be left as they are */
}

Again, these styles may be located in a sass (.scss) partial file instead of style.css, but hopefully it'll get you closer to what you're looking to do. If you have any questions regarding the above or need further help, let me know.

David Reid
David Reid
19,691 Points

Thanks for the help Joel! Appreciate it! Can't believe I didn't think it was the set height of the header!! How do I choose yours as the best answer?

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

No problem David. Since I submitted the reply as a comment rather than an answer, you won't be able to select it as a best answer. Not to worry, good luck with the rest of the project!