Support » Theme: Frontier » Header image issue

  • Resolved Ian Schoonover


    Hello, I’m currently working on 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!


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


    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.

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

    @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,


    Theme Author ronangelo


    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


    This was just what I needed, thanks again!


    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:

    Many thanks in advance

    Moderator Andrew Nevins


    Forum moderator

    You can create your own thread here:


    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.