header hide section hides more than supposed to

[computers]

Problem 1 maybe related to problem 2.
In the header section I have it set to Hide the Tag line when displayed on Phone.
1. Because it screws up the text and image overlap on top of each other.
2. However setting the setting to not display on phone, does more than that. It also hides the Site Logo field as well.
I have tried the setting to hide the tag line on “Desktop”. The same thing happens, you loose the logo as well.
I have added the picture dimensions to try ensure space for the logo is alocated but this has had no effect
See the picture of the settings
Am i doing something wrong or is this a bug?
url: http://ctry.biz

[scrambler]

SEE LAST POST FOR REVISED METHOD

A) If you would rather keep both, and just fix the collision, you can just keep the tagline visible all the time, and add the rules below to Main options > Fonts & Custom > Custom CSS Rule box

.is-smalltablet #site-tagline {margin-top:7% !important;}

.is-phone #site-tagline {margin-top:12% !important;}

.is-phone #site-logo img {left:0px !important;padding:5px;}

B) If you do want to hide the tagline on phones, It is not that the logo is hidden but that it ends up under the Menu bar because neither title or tagline are here to make a space for it. you also need some tweaking on phone

Add the rule below in Main options > Fonts & Custom > Custom CSS Rule box

.is-phone #site-logo img {position:relative !important;left:0px !important;padding:0 10px 0 10px;height:auto !important;}

That should fix it

But the logo and tagline also collide a bit on small tablets

To fix that you should ad the rule

.is-smalltablet #site-tagline {margin-top:7% !important;}

[Weaver]

Perhaps a simpler solution to this is to realize that adding the positon:absolute to the image makes it have a height of 0!

So you also must add a Custom CSS rule on the Fonts & Custom tab:

#site-logo {min-height: 54px;}. Now other position tweaks should work more as expected.

[scrambler]

I actually tried the min-height on #site-logo, and it did not work. As long as the logo is positioned absolute if the tagline disappear it ends up under the menu.

BUT, I realize YOU made the inline style on the logo image, and it is part of the problem.

So the solution if you would like to keep the tagline on all devices is to do the following.

Do not hide the tagline.

In the logo html of your logo image tag, instead of using the CSS you have now in the style attribute (in yellow below)

<a href=”http://www.ctry.biz”>&lt;img src=”http://ctry.biz/wp-content/uploads/2015/03/logo1.png&#8221; border=”0″ width=”412″ height=”54″ alt=”JCH Computers” style=”position: absolute; top: 5px; left: 35px; background-color: transparent; width: 412px; height: 54px;”></a>

Use the following CSS in the style attribute

style=”position: absolute;top: 5px; margin-left: 5%;  max-width: 95%; background-color: transparent;”

By using a margin in % and max-width in % (total < 100%) you will make sure the logo always fits well

Then only add the rule below in Main options > Fonts & Custom > Custom CSS Rule box to prevent the tagline from ever colliding

#site-tagline {margin-top:65px !important;}

---

If you Still decide you do not want the tagline on phone do the following

In the logo html of your logo image tag, instead of using

style=”position: absolute; top: 5px; left: 35px; background-color: transparent; width: 412px; height: 54px;”

Still use

style=”position: absolute; top: 5px; margin-left: 5%; max-width: 95%; background-color: transparent;”

By using a margin in % and max-width in % (total < 100%) you will make sure the logo always fits well

Then add the rules below to the theme Custom CSS rule box to prevent the tagline from ever colliding and the image from being positioned absolute on phones

#site-tagline {margin-top:65px !important;}
.is-phone #site-logo img {position:relative;}

[computers]

Thank you scrambler. The first option fixed all the issues nicely.
Very much appreciated help. Your support is terrific.

Weaver.  Can I suggest that the height option be configured as an option in the Header sections. We have widths etc but no heights. It was something I was looking for, but as you point out the option is not there for Site Title, Tagline, Widget Area, or HTML Content.
Thanks for your info.

[scrambler]

You never want to fix a height as this makes the design non responsive.

The only reason you run into that issue is because you used a position absolute for your logo so you could move it over. If you had not done that an let the logo take its place below there would have been no issue.

So if you add position absolute, I would say it is your responsibility to add other CSS that may be needed 🙂

[Author]

Posts