Fixed header image and navbar?

  • Resolved fberzau

    (@fberzau)


    11 years, 3 months ago

    I was trying to set the header and navbar to fixed, so both elements don’t scroll off. For the navbar (menu) it was easy to accomplish with the following CSS:

    .navbar {
    position: fixed;
    z-index: 1;
    }

    To get this done for the header image, however, I’m lost. I tried a few things but can’t figure it out. Any help?

    By the way, not sure this is relevant, but I’ve also modified the header image height with the following:

    .site-header .home-link {
    min-height: 60px;
    }

    I am using the twenty thirteen theme. If you’d like to see the site, it’s at https://beta.berzau-consulting.com/.

    Thanks, Frank

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Apply the position fixed to the element that wraps both those elements (the header).

    Whereabouts are you making these modifications btw?

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

    Thread Starter fberzau

    (@fberzau)

    I’ll do the child theme later.

    I tried adding this custom CSS:

    .site-header {
    position: fixed;
    }

    The result looks strange (image only visible on the left side, the area of the site-header .home-link remains white). Any idea why, or can you maybe provide the custom CSS to get it working correctly.

    Thanks, Frank

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Give it a 100% width.

    Thread Starter fberzau

    (@fberzau)

    So cool. Working now.

    Thanks much, especially for the very prompt and accurate help.

    Thanks, Frank

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Fixed header image and navbar?’ is closed to new replies.