Hello folks. Having this issue with the black navigation bar background is about half the width of the page when viewing on tablet or phone. Works fine in desktop otherwise.www.logicweb.com
Your help is appreciated.

Code:

  • <header>
  • <divclass="wrapper">
  • <!-- LOGO -->
  • <ahref="http://www.logicweb.com"title="LogicWeb"class="logo"><imgsrc="/assets/img/logo.png"alt="LogicWeb"></a>
  • <!-- PARTNERS -->
  • <ahref="https://www.logicweb.com/affiliate"class="btn partners">AFFILIATES</a>
  • <!-- CLIENT LOGIN -->
  • <ahref="https://www.logicweb.com/billing/clientarea.php"class="btn client-login">CLIENT LOGIN</a>
  • <!-- LIVE CHAT -->
  • <ahref="javascript:void(0);"onclick="olark('api.box.expand')"class="btn live-chat">SALES CHAT</a>
  • <!-- PHONE NUMBER -->
  • <ahref="tel:18775644293"class="btn phone-header">1.877.LOGICWEB</a>
  • </div>
  • <divclass="clear-both"></div>
  • <nav>
  • <divclass="wrapper">
  • <!-- TOP NAV -->
  • <ul>
  • <li<?php
  • if($homePage ==1){
  • echo ' class="is-on"';
  • }
  • ?>><ahref="/"><span>HOME</span></a></li>
  • <li<?php
  • if(stristr($_SERVER["PHP_SELF"],"web-hosting")){
  • echo ' class="is-on"';
  • }
  • ?>><ahref="/web-hosting/"><span>WEB HOSTING</span></a></li>
  • <li<?php
  • if(stristr($_SERVER["PHP_SELF"],"resellers")){
  • echo ' class="is-on"';
  • }
  • ?>><ahref="/resellers/"><span>RESELLERS</span></a></li>
  • <li<?php
  • if(stristr($_SERVER["PHP_SELF"],"virtual-private-servers")){
  • echo ' class="is-on"';
  • }
  • ?>><ahref="/virtual-private-servers/"><span>VPS</span></a></li>
  • <li<?php
  • if(stristr($_SERVER["PHP_SELF"],"dedicated-servers")){
  • echo ' class="is-on"';
  • }
  • ?>><ahref="/dedicated-servers/"><span>DEDICATED SERVERS</span></a></li>
  • <li<?php
  • if(stristr($_SERVER["PHP_SELF"],"cloud-hosting")){
  • echo ' class="is-on"';
  • }
  • ?>><ahref="/cloud-hosting/"><span>CLOUD HOSTING</span></a></li>
  • <li<?php
  • if(stristr($_SERVER["PHP_SELF"],"other-services")){
  • echo ' class="is-on"';
  • }
  • ?>>
  • <ahref="/other-services/email-marketing.php"><span>OTHER SERVICES</span></a>
  • <div>
  • <?php include($_SERVER["DOCUMENT_ROOT"].'/other-services/inc/other-sub-nav.php');?>
  • </div>
  • <li<?php
  • if(stristr($_SERVER["PHP_SELF"],"")){
  • echo ' class="is-on"';
  • }
  • ?>><ahref="/other-services/which-web-host.php"><spanstyle="margin-left:405px">You want IT. We got IT.</a><spanstyle="font-size:8px;margin-top:13px;color:#B9B9B9;margin-left:-8px;float:right">SM</span></span></li>
  • </ul>
  • </div>
  • <divclass="clear-both"></div>
  • </nav>
  • </header>
Please see attached to know what I'm referring to. Still not able to figure this out. Thanks.

photo.PNG


Someone elsewhere mentioned this:

Inside your <nav> there is a <div class="wrapper">


  • .wrapper {
  • margin: 0 auto;
  • max-width: 1300px;
  • min-width: 960px; /* **bad start for a responsive design** */
  • padding: 0 40px;
  • }


I tried a few variations but none work. I removed the div wrapper from the <nav>. I then tried adding style="margin: auto" to the <ul>. I also tried adding it to the <nav>, none of this worked as they all resulted in a left aligned menu.

Thanks in advance.