WordPress.org

Ready to get started?Download WordPress

Forums

Frontier
[resolved] Header image issue (8 posts)

  1. Ian Schoonover
    Member
    Posted 5 months ago #

    Hello, I'm currently working on http://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

  2. ronangelo
    Member
    Theme Author

    Posted 5 months ago #

    @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. http://wordpress.org/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%;}
  3. Ian Schoonover
    Member
    Posted 5 months ago #

    @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

  4. ronangelo
    Member
    Theme Author

    Posted 5 months ago #

    @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
    }
  5. Ian Schoonover
    Member
    Posted 5 months ago #

    @ronangelo

    This was just what I needed, thanks again!

    Ian

  6. stani17
    Member
    Posted 5 days ago #

    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: http://www.zonabg.at

    Many thanks in advance
    Best

  7. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 5 days ago #

    You can create your own thread here: http://wordpress.org/support/theme/frontier#postform

  8. stani17
    Member
    Posted 5 days ago #

    Thanks

Reply

You must log in to post.

About this Theme

About this Topic