9 Replies Latest reply on Oct 28, 2016 9:34 AM by 7e7c65ac9f54cb121ba10079abdc6b0f569e2f36

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

      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="http://www.opensymmetry.com">

                    <div class="mktoImg" id="headerLogo" mktoname="Header Logo (40px height)"><img src="http://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="http://www.opensymmetry.com/">HOME</a></li>

                      <li>

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

                        <li>

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

                    <li>

                        <a href="http://www.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--->

       

      os-desktop.png

       

      os-mobile.png