I’m sorry, but I can’t seem to reproduce your issue; your code works fine for me. Is there any other CSS on the navigation bar that might be interfering? Also, do you call body_class() in your <body> tag:
<body <?php body_class(); ?>>
If you don’t, then the admin-bar class won’t exist and your CSS won’t work correctly.
Thanks stephencottontail!
<body <?php body_class(); ?>> That solved the problem.
This is a bit off-topic, but because it’s also related to the admin bar and the same theme I’m working on, I guess it’s fine here.
My theme also has a mobile navigation for smaller screens and it’s working perfectly, but for some reason admin-bar is not fixed anymore when I resize my browser window to smaller than 640px. It is still there and working, but it doesn’t stick to the top of the window, instead it goes off the window when I scroll down.
THE PROBLEM
I had this issue earlier, so <body <?php body_class(); ?>> did not cause it. I tried to comment out/remove @media only screen and (max-width: 640px)-block, but it didn’t solve the problem.
@media only screen and (max-width: 640px) {
h1 { font-size: 42px; }
p#subhead { font-size: 26px; }
nav li.menu-icon, nav.responsive li.menu-close {
display: inline-block;
padding-top: 12px;
padding-bottom: 10px;
}
nav li, nav.responsive li.menu-icon {
display: none;
}
nav.responsive li:not(.menu-icon) {
display: block;
background: #455A64;
}
nav.responsive li:hover:not(.menu-close) {
background: #FF9800;
}
}
Note that it works (is still ‘fixed’) between max-width: 782px (where the admin bar becomes bigger) and max-width: 640px (where the mobile menu begins).
Thank you for help!
I found out that it has nothing to do with my mobile menu (@media only screen and (max-width: 640px)). The problem comes after admin bar‘s break point at media screen and (max-width: 600px). It seems to be WordPress’s feature that admin-bar is static with screen-widths 600px or smaller. However I didn’t manage to fix the issue it causes for my navigation bar.
