How to Setup Responsive Header?

  • Resolved webdbapps

    (@webdbapps)


    9 years, 1 month ago

    Hi,

    I had our designer create a new logo for our site and it looks create on a desktop. However, from all mobile devices, the header runs off the right of the screen, despite adding width 100% to the header-logo section of the CSS file.

    How do we ensure that the logo is responsive? That is, what other CSS modifications are required to ensure that the theme responds to mobile platforms and reduces the width of the logo to the viewport?

    Thanks for your help and guidance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    9 years, 1 month ago

    Hello webdbapps,

    => Put below css code into Additional CSS textarea (Dashboard >> Apperance >> Customize) then click on Save & Publish button.
    => If there is no Additional CSS option then put below css code into your current theme’s style.css file located at wp-content/themes/your_current_active_theme/ folder.


    @media only screen and (max-width: 768px){
    #header-logo, #header-logo img{
    height: 90px;
    width: 100%;
    float: left;
    }
    }

    Note : All Changes you done in style.css or other file are gone when you update theme. So prefer Child Theme

    Hope this will helps you.

    Thread Starter webdbapps

    (@webdbapps)

    9 years, 1 month ago

    Thanks for your help. Greatly appreciated!!

    Thread Starter webdbapps

    (@webdbapps)

    9 years ago

    So, we’ve upgraded the Frontier theme recently and the additional CSS is in place. However, the site is no longer responsive. What further adjustments are required?

    Theme Author ronangelo

    (@ronangelo)

    9 years ago

    However, the site is no longer responsive.

    The entire site or just the logo?

    There should really be no adjustments at all since the theme is made to be responsive (including the logo) unless you turned it off on the options.

    When I go to your site it does adapt to smaller screens. Your header image isn’t shrinking because you’re not using the Header Logo functionality as discussed on another post of yours.

    Try the following
    – Remove all CSS modifications you’ve added to the Header/Logo
    – Remove your Header Image on Appearance -> Header
    – Add your image on Frontier Options -> Display -> Header Logo

    If you’re using any form of caching plugins, refresh that so you could see the changes.

    • This reply was modified 9 years ago by ronangelo.
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to Setup Responsive Header?’ is closed to new replies.