LogicWeb Hosting Site

[LogicWeb]

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.

[LastMitch]

@LogicWeb

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.

Can you post your CSS code regarding about navigation bar?

[code739]

You mean, you gonna make it a responsive website?

[drjohn]

The content in the header div is forcing that div to be wider than you want when you make the viewport width smaller. This then makes the content below your menu sit centered on THAT width while your menu contracts to match the viewport size.
Split the content in the header into two parts, one floated left, one floated right (containing everything but the logo on the left, a simple <span> would work or one extra div).
When the viewport gets too small to accomodate them both on the same level, one will slip under the other, the header will stay the width of the view port, the content will be centered on the width of the viewport, and the menu will fill the viewport.

I'll give you one guess why I know this will work ;)

[LogicWeb]

Thanks for the responses. I'm not sure how to correct it. I tried a few things, but nonetheless the code is below.

<header>

    <div class="wrapper">

        <!-- LOGO -->
        <a href="http://www.logicweb.com" title="LogicWeb" class="logo"><img src="/assets/img/logo.png" alt="LogicWeb"></a>

        <!-- PARTNERS -->
        <a href="https://www.logicweb.com/affiliate" class="btn partners">AFFILIATES</a>

        <!-- CLIENT LOGIN -->
        <a href="https://www.logicweb.com/billing/clientarea.php" class="btn client-login">CLIENT LOGIN</a>

        <!-- LIVE CHAT -->
        <a href="javascript:void(0);" onclick="olark('api.box.expand')" class="btn live-chat">SALES CHAT</a>

        <!-- PHONE NUMBER -->
        <a href="tel:[phone]" class="btn phone-header">1.877.LOGICWEB</a>

    </div>   
    <div class="clear-both"></div>

    <nav>
        <div class="wrapper">

            <!-- TOP NAV -->
            <ul>
            <li<?php
                    if($homePage == 1) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/"><span>HOME</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "web-hosting")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/web-hosting/"><span>WEB HOSTING</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "resellers")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/resellers/"><span>RESELLERS</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "virtual-private-servers")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/virtual-private-servers/"><span>VPS</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "dedicated-servers")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/dedicated-servers/"><span>DEDICATED SERVERS</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "cloud-hosting")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/cloud-hosting/"><span>CLOUD HOSTING</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "other-services")) { 
                        echo ' class="is-on"';
                    }
                ?>>
                <a href="/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"';
                    }
                ?>><a href="/other-services/which-web-host.php"><span style="margin-left: 405px">You want IT. We got IT.</a><span style="font-size:8px; margin-top:13px; color:#B9B9B9; margin-left:-8px; float:right">SM</span></span></li>
            </ul>

        </div>
        <div class="clear-both"></div>
    </nav>

</header>

[LogicWeb]

Please see attached to know what I'm referring to. Still not able to figure this out. Thanks.

[LogicWeb]

Hey just hoping someone may help on this? Thank you.

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.

[LastMitch]

I tried a few variations but none work.

max-width: 1300px;
min-width: 960px; 

That is really long.

It should be like:

@media (max-device-width: 1080px) and (orientation: landscape)
@media (max-device-width: 1024px) and (orientation: landscape)
@media (max-device-width : 768px)  and (orientation: landscape)