Make a static container scroll OR Have header img change to text in mobile

  • I have a header/navigation container in a responsive theme I’m using (SilverStone) which is static. It stays on top as you scroll. I would like to either:

    a) Make it move with the rest of the page / not be static

    OR

    b) Set it so that on mobile (under 400px) the image in the header is not shown and instead a text header is shown

    The reason for wanting to do these things is because when I view the website on a mobile device the header image takes up about 80% of the screen and it is very difficult to read the content on the page.

    https://www.weedthebook.ca/about-the-author/

    If you go to that page on your phone you will see the problem.

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

  • This being a specific theme issue, I think your best bet would be to post this in the theme’s support forum. The fixed attribute is being set dynamically, so it’s a bit trickier than a typical css fix.

    Thread Starter Abbey Jackson

    (@abegael)

    Thanks for the reply Bill. I have been working on this for hours (I’m self taught by trial and error so what may be obvious for some is not for me unfortunately) and I FIGURED IT OUT. So happy!

    If anyone is wondering: I used CSS to set the max image height to 30%, that way it resized on the smaller screen ?? It’s not quite the solution I asked for but it solved the problem of the site being unreadable on mobile and that’s all I wanted.

    That’s great that you found a solution that you’re happy with. Well done, you!

    I still think you might want to consider checking with the theme authors as well. Doing a quick check in Chrome’s device simulator has the fixed header taking up around two-thirds of the viewport. Anyway, keep up the good work.

    Thread Starter Abbey Jackson

    (@abegael)

    Oh I tried already but I haven’t been able to find any contact info for them of course.

    I still want to have the image replaced by text in the mobile view but at least I have a fix that works for now and I can figure out how to change it later, when the higher priority stuff is done.

    Thanks for your support!

    You’re welcome. And the theme’s support forum is: https://www.ads-software.com/support/theme/silverstone#postform

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Make a static container scroll OR Have header img change to text in mobile’ is closed to new replies.

Tags