Home Forums Weaver Xtreme Theme header hide section hides more than supposed to

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #17539
    computers
    Participant

    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

    #20930
    scrambler
    Moderator

    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;}


    #20931
    Weaver
    Keymaster

    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.

    #20932
    scrambler
    Moderator

    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;}

    #20933
    computers
    Participant

    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.

    #20934
    scrambler
    Moderator

    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 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.