Fixed navigation bar doesn't work with admin bar

  • Resolved Manteli

    (@manteli)


    8 years, 9 months ago

    Hey,

    I’m making my own theme with a fixed navigation bar on the top of the page. Unfortunately it doesn’t work when WordPress admin bar is enabled. I have tried couple of different fixes without luck.

    /* Makes fixed top navigation bar */
.fixed {
    position: fixed;
    top: 0px;
    height: 70px;
    z-index: 1;
}
/* Does NOT fix the issue with admin bar */
.admin-bar .fixed { top: 32px; }
@media screen and ( max-width: 782px ) {
  .admin-bar .fixed { top: 46px; }
}

    It seems like my theme’s css file doesn’t have ‘access’ for .admin-bar. All the tips are very welcome! Thanks.

    THE PROBLEM I HAVE
    WHAT I WANT TO GET

Viewing 4 replies - 1 through 4 (of 4 total)

  • 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.

    Thread Starter Manteli

    (@manteli)

    Thanks stephencottontail!

    <body <?php body_class(); ?>> That solved the problem.

    Thread Starter Manteli

    (@manteli)

    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!

    Thread Starter Manteli

    (@manteli)

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fixed navigation bar doesn't work with admin bar’ is closed to new replies.

Tags