Navbar and positioning problems

  • CrispOne

    (@crispone)


    8 years ago

    I’m working on a website for a church. Trying to get the navbar to be transparent when not in sticky mode, and opaque when sticky, as well as when viewed on a mobile device.

    When the page loads initially, there’s a white bar at the top. After a second, the white bar goes away and everything below it moves up so that the nav bar is overlapped by the welcome message.

    URL is https://www.hope68.com

    Thanks in advance.

    EDIT: I found that changing the welcome info offset top in the customization options helped with the overlapping issue on larger screens but not on my phone. Oddly, it also causes the white bar across the top to go away more quickly.

    • This topic was modified 8 years ago by CrispOne.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @crispone,

    It looks like you have already achieved what you described in the first paragraph of your post above.

    I did not notice any white bar, have you resolved this issue?

    Kind Regards, Roman.

    Thread Starter CrispOne

    (@crispone)

    I have partially resolved the issue, although I can’t help but feel like my solution isn’t quite as clean and efficient as it could be, but it works. I just kept on tweaking things until it worked. A new issue is that the CSS transition of the top bar from transparent to dark grey works when fading TO gray, but it’s not working the other way (back to transparent). It just changes suddenly.

    It still looks strange on mobile devices with small screens, and I’m kind of new to screen-size-specific CSS.

    Hello @crispone,

    Please try to use the following CSS code.

    You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

    .top-bar {
    transition: 0.5s;
}

    Kind Regards, Roman.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Navbar and positioning problems’ is closed to new replies.