Possible to have a header for desktops AND mobile ?

It is absolutely possible, however requires coding experience. If your theme does not work as you would like it, you should try and find a plugin that might help or inquire with the theme author on how you can implement this.

***oops, wrong topic ??

• This reply was modified 7 years, 1 month ago by Keith Driscoll.

@madhavadasa

There are three or four ways you can fix this. I will focus on the easiest methods below/

1- Don’t use an image with text in it. This is a lot easier said than done, but the benefits are justifiable. There many reasons to opt for using CSS and html for any text element.

2- Have both the logo and the header image on the page but use CSS to hide one of them depending on the screen size.

Let me know which option sounds like what you want to do and I can expand further.

If you could expand on option #2, would appreciate thanks.

“2- Have both the logo and the header image on the page but use CSS to hide one of them depending on the screen size.”

@madhavadasa

1- Find the location of the header image in your child-theme.

In you case it’s something like this:

Image 1

2- Either remove or comment out the current header. (make sure you have backups)

3- Add your images. Both the logo for mobile and the text header for desktop.

4- Add classes to the images to identify them.

You want to end up with something like this:

Image 2

5- Add the following CSS code to your stylesheet:

.big-header,
.small-header {
  max-width: 100%;
  margin: 0 auto;
}

@media (max-width: 800px) {
  .big-header {
    display: none
  }
  .small-header {
    display: block
  }
}

@media (min-width: 800px) {
  .big-header {
    display: block
  }
  .small-header {
    display: none
  }
}

What this does is check for the screen size. If the screen size is bigger than 800px (your theme’s current cutoff point, it shows the small header. If the screen is bigger that 800px, it shows the large header.

6- Check the results and modify according to your needs.

Here’s a JsFiddle for reference

Let me know if you need more help.

Thank you for the help. I will need some more info.

“1- Find the location of the header image in your child-theme.”
child theme ? the child theme doesn’t have this line

“2- Either remove or comment out the current header. (make sure you have backups)
How to comment out ? by putting /* in front and */ after ?

“3- Add your images. Both the logo for mobile and the text header for desktop.”
not sure where or how to add the images

“4- Add classes to the images to identify them.”
not sure about how to do this either

“5- Add the following CSS code to your stylesheet:
stylesheet…do you mean the child theme ?

I have no knowledge of code, I am just familiar with adding code snippets to the child theme. In this case the theme has a custom CSS box which I use instead.

Is it just a matter of adding the correct code to the child theme (or custom CSS box) ? I assume the code would need the URL’s for both images. Possible you could give the complete code (with example url’s if needed) ? Thanks.

I got code from my theme developer that works great. Don’t know if it works for all themes (mine is Tempera).

/* hide header on mobile */

@media (max-width: 799px) {
#bg_image { display: none; }
}

/* hide logo on desktop */

@media (min-width: 800px) {
body a#logo { display: none; }
}
@media (max-width: 799px) {
body #branding #bg_image + #header-container { position: static; }
a#logo { text-align: center; }
}