Navigation
Archive / Fixed Navbar with Notification/alert bars (Foobars or Hello Bar)
This is archived content. Visit our new forum.
  • Author
    Posts
  • August 13, 2014 at 3:06 pm #83972

    daringddw
    Participant

    Am trying to use the foobars plugin with the integrity stack and a fixed navbar and and slider above the masthead. When we want to alert visitors about a special announcement, I use the plugin which places a 30px notification bar at the top of the screen. The problem I encounter is that when scrolling down the page and the navbar moves to the top of the screen, it covers the foobar. Adding padding-top of 30px to the navbar gets me what I want. The issue is, i only need that padding there when a there is a foobar there. If we have nothing to announce, the notification bar is turned off, which then leaves 30px of blank space above the navbar.

    How can i get the fixed navbar to scroll all the way to the top when there is no foobar, but stop scrolling 30px from the top when there is a foobar? Thanks for any help!

    August 13, 2014 at 3:18 pm #83984

    Rad
    Moderator

    Hi there,

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have have provided us with your URL, we will be happy to assist you with everything.

    Thanks!

    August 13, 2014 at 3:29 pm #83996

    daringddw
    Participant
    This reply has been marked as private.
    August 13, 2014 at 4:19 pm #84045

    Rad
    Moderator

    Hi there,

    Thanks for the info.

    Would you mind creating a test page with a test foobar? I would like to check which classes are active when foobar is active. This way, we can automatically apply padding when its enabled. Or else you will have to do it manually in every page.

    Thank you.

    August 13, 2014 at 5:35 pm #84094

    daringddw
    Participant
    This reply has been marked as private.
    August 13, 2014 at 6:08 pm #84127

    Rad
    Moderator
    This reply has been marked as private.
    August 13, 2014 at 9:28 pm #84221

    daringddw
    Participant
    This reply has been marked as private.
    August 13, 2014 at 9:37 pm #84226

    Rad
    Moderator

    Hi there,

    Thanks, I can see it now. After checking, the foobar plugin does not add any css selector the the body. Thus can’t tell if its enable or not via css.

    Your option is to do it manually.

    Add this css at your customizer’s custom css.

    .foobar-enabled .x-navbar-fixed-top {
top: 30px !important;
}

    Then edit your page which you want to have a foobar. And under Page Settings > Body CSS Class(es), add foobar-enabled. Remove it again if you will disable foobar on that page.

    Thanks!

  • Author
    Posts