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
Lisa Westlund
667 PointsIs there a way to push the content of a wordpress site below the wp admin-bar so it wont hide my menu when logged in?
When logged in to wordpress the wp admin bar hides the menu in my theme. I want to automatically push the content and menu below the admin bar, but of course only when the admin bar is shown.
2 Answers
Sean T. Unwin
28,690 PointsPlease see the first 3 minutes of this video lesson - https://teamtreehouse.com/library/from-bootstrap-to-wordpress-theme/setup-a-bootstrap-theme/creating-bootstrap-navigation-in-wordpress.
It boils down to using the .admin-bar class from the body tag which is shown when using body_class().
Chain this with your first element on your page (whether a container or navigation) and push it down by the width of the admin bar.
IMPORTANT: The admin bar has more height on smaller screens.
Here is my CSS relating to the admin bar from the completed course above:
.admin-bar .navbar-fixed-top {
margin-top: 30px;
}
@media (max-width: 800px) {
.admin-bar .navbar-fixed-top {
margin-top: 46px;
}
}
Andraž Lazi?
3,130 PointsI guess since new WP update the admin-bar isn't working anymore.
Lisa Westlund
667 PointsThe solution above works perfectly for me, and I'm running the latest version (4.2.2) :-)
Andraž Lazi?
3,130 PointsWierd, I have the sem version. I had to use .customize-support which was created in <body class=" customize-support">. When I inspect the body element there is that class but when I view the source page there is only body tag.
Lisa Westlund
667 PointsHmm, I just used body_class(); in my theme header file, in the opening body tag, and then worked with the css as Sean T. Unwin suggested. I followed the instructions in the video linked in his answer.
Lisa Westlund
667 PointsLisa Westlund
667 PointsThank you! Works so much better now :-) I only have one problem with it. When the width of the device is smaller than 600px the wp admin bar is somehow automatically pushed 46px down on the page, leaving a blank space on top of it. I solved that (probably not pretty, kind of new to this and working on a school project...) with:
@media (max-width: 600px) { .admin-bar { margin-top: -46px; } }
It works until I try to use the menu. When I click on my own menus menu icon the wp admin bar is pushed the 46 pixels down again and covers the menu row. This probably sounds totally confused, which I kind of am right now :-)
Lisa Westlund
667 PointsLisa Westlund
667 PointsNever mind, solved it :-) thanks again for your help, appreciate it!