site title disappearing in mobile view

hello,

i inverted my site title on white pages so that it is visible, but they are still not showing up in mobile view. 

www.empathystories.org/privacy

www.empathystories.org/terms-of-use

how do i fix this?

thank you!

You need to add this, the header has a different identifier on mobile:

img.Mobile-bar-branding-logo {
    filter: invert(1);
}

and this for the text:

a.Mobile-bar-branding:after {
  color:#000;
}

Let me know if that helps, and give my post a thumbs up if you can, thanks!

hi @Ziggy

thanks for responding. that's on the right track but it changed for all of the pages not the two i am trying to fix: terms of use and privacy policy. how do i make it page specific?

1 minute ago, fc1 said:

how do i make it page specific?

How did you do it before?

You can either add the page IDs if you're using Custom CSS, or put it in the page header code injection within <style> tags.

@Ziggy if you'd be willing to tell me how to add the page ids in custom css that would be helpful.

Here's the Custom CSS with the two page IDs:

#collection-63d7fa1d10a9b848be40cf65, #collection-61ac110e0331ac60bef6ec63 {
  img.Mobile-bar-branding-logo {
    filter: invert(1);
  }
  a.Mobile-bar-branding:after {
    color:#000;
  }
}

You can add more page IDs to the first line, comma-separated.

Once you've installed that, can mark my post as the solution to your thread and give a thumbs up? Thanks!