• Resolved Ian Schoonover

    (@iantskon)


    Hello, I’m currently working on https://www.activorenewables.com/home/ and I have the unique headers plug-in installed so I can have a different header for each page. I’d like to have it where these header images are responsive. I know the frontier custom header option does this, but when viewed on mobile or resized on desktop the header area remains at the height I have it set to in the frontier options area, which is 141px, thus leaving a white (being the default header bg) margin beneath the responsive header image.
    Am I able to make the header area responsive along with the header image? And will I be able to have different custom header images for each page?
    Thanks in advance!

    Ian

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author ronangelo

    (@ronangelo)

    @iantskon
    This is a bit tricky. You can’t use the logo option because you won’t have unique header images. The Background Image on the other hand can use unique headers but can’t be made responsive as the header has no height of it’s own. And if you do set a height, it will be forced to use that value even on smaller screens.

    To make this work you’ll need to install this handy plugin. It adds a widget that accepts PHP code. https://www.ads-software.com/plugins/php-code-widget/

    Put one in the Header widget area then add this:

    <img id="header-logo" src="<?php echo get_header_image(); ?>" />

    And on Frontier’s CSS option, add this:

    #header {min-height: 0;}
    .widget-header {padding: 0; width: 100%;}

    Thread Starter Ian Schoonover

    (@iantskon)

    @ronangelo This worked great, I’ll be implementing it on my other site with your theme as well.

    One more question, if you don’t mind –
    At a certain browser size, or when the screen is flipped to landscape mode on my phone, the menu begins to wrap, like so:
    Screen shot

    Is there a way to fix this? Maybe adjust the LI size at a certain browser width so that it either fits them all horizontally, or it stacks them vertically, but no half and half wrapping?

    If you’re able to help with that I’d really appreciate it.

    Thanks again,

    Ian

    Theme Author ronangelo

    (@ronangelo)

    @iantskon
    The css code that makes the menu items stack vertically is wrapped in media query that is implemented when the screen is at 480px or below. It’s located in responsive.css. You can copy it’s content then paste on the custom css option.

    @media screen and (max-width:480px){
       // Copy the codes found here
    }
    @media screen and (max-width:640px){
       // Paste here
    }
    Thread Starter Ian Schoonover

    (@iantskon)

    @ronangelo

    This was just what I needed, thanks again!

    Ian

    Hi,
    I am extremely happy withnthe frontier theme. I have one question. Ist it possible to make my header image responsive, so that it resizes, when I browse in my site over my mobile.
    Here is the link: https://www.zonabg.at

    Many thanks in advance
    Best

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thanks

    Thanks, it helped make it show better on my laptop, but still way too large on my android phone.-
    I have to scroll across to see the whole image while the text on the page is shrunk and fits up and down on the left side – seems to be sized for the phone’s screen..

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header image issue’ is closed to new replies.