Header image/Navigation not responsive in Guided-Template 2-B | Community
Skip to main content
A
Anonymous
June 20, 2016
Question

Header image/Navigation not responsive in Guided-Template 2-B

  • June 20, 2016
  • 3 replies
  • 5019 views

I recently downloaded "Template2-B.html", it's a responsive "Guided-Template" which I have customized.  The image at the top is full width but is not responsive. I've applied some CSS that makes it sort of responsive but the height remains the same on any screen size so the image gets squeezed together rather than scaling proportionately.

With the navbar, once it gets to medium size (around 980px;), the navigation disappears.

If anyone has any suggestions, please share!

<!---Navbar code--->

   <header id="header" class="header-section section section-dark navbar navbar-fixed-top">

        <div class="container-fluid">

          <div class="navbar-header navbar-left">

            <!-- HEADER LOGO -->

            <a class="navbar-logo navbar-brand anchor-link" href="opensymmetry.com">

              <div class="mktoImg" id="headerLogo" mktoname="Header Logo (40px height)"><img src="opensymmetry.wpengine.com/wp-content/uploads/2016/03/OS-logo-80x45.png" width="70"></div>

            </a>

          </div>

          <nav id="navigation" class="navigation navbar-collapse collapse navbar-right">

            <!-- NAVIGATION LINKS -->

            <ul id="header-nav" class="nav navbar-nav">

              <li> <a href="opensymmetry.com/">HOME</a></li>

                <li>

                  <a href="opensymmetry.com/solutions">SOLUTIONS</a></li>

                  <li>

                  <a href="opensymmetry.com/customers">CUSTOMERS</a></li>

              <li>

                  <a href="opensymmetry.com/customers">OUR PARTNERS</a></li>   

            </ul>

          </nav>

    </div>

      </header>

<!---End Navbar code--->

<!---image code--->
CSS used for image:

width: 100%;

height: auto;

<!---END image code--->

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

Grégoire_Miche2
Grégoire_Miche2
Level 10
June 20, 2016

There is surely a media query that overrides your CSS on smaller width devices.

Please provide the URL of your page.

-Greg

A
Anonymous
June 20, 2016

Here's a link to the page:

http://pages.opensymmetry.com/Rewards-test.html

Get Outlook for iOS<https://aka.ms/o0ukef>

A
Anonymous
June 21, 2016

Hi Tom,

I was playing around with Template-2B and the background image should be 1600x1066px and your hero banner image is only 1600x600px.

As Greg says you can play around with the css media query, but you wont get a perfectly scaling image without a lot of hacking. I would suggest you look at adjusting the css to get a best fit, or loading a new image for smaller devizes e.g.

@media (max-width: 991px) {

.lpimg {background-image:.....

A
Anonymous
June 21, 2016

Thanks Nik, I actually adjusted the CSS and made it 1600x600 to fit the project needs.  I looked at the original template with the background set at 1600x1066 and that one isn't responsive either. So the template hero image wasn't designed to be responsive but for the purposes of my project, I'd like it to be responsive.

Ulf_Deeg
Ulf_Deeg
Level 3
June 21, 2016

without looking at your code in detail.... apply some padding to the wrapper/placeholder DIV based on the width/height ratio of each Hero in the Imageset

{

  width: 100%;

  padding-bottom: 56.25%; /* 16:9 */

}

Best

Ulf

A
Anonymous
June 21, 2016

Thanks, I had no luck adding this to the wrapper div.

  width: 100%;

  padding-bottom: 56.25%; /* 16:9 */

Terms & ConditionsAccessibility statement

Loading footer...