CSS How to scale site without nav scaling

Question

I just added scalability to my website, but when I scale, the navigation scales too. on all devices, (specifically mobile), when the page is zoomed in, the nav zooms as well. How do I keep the nav the same size regardless of the viewport zoom?

I tried referring to this question, but can't make out the explanation for it. If this is what I'm looking for, can someone please help explain it a little more?

I created this JSFiddle, but being that it's mobile, I'm not sure if it'll be helpful.

Nav:

<nav>
<div>
<a href="/">
    <div id="logo"><img src="http://www.lehigh.edu/google/google_search.png" alt="Home"/></div>
    <div id="headtag"><img src="http://codeboxr.com/wp-content/uploads/2012/06/6_logo_predesign.jpg" alt="Home"/></div>
    <div id="tagline"><img src="https://www.google.com/logos/doodles/2014/world-cup-2014-2-4845213826678784.3-hp.gif" alt="Home"/></div>
</a>
</div>
<div> 
<a href="/" class="here">Home</a>
<a href="/about.php">About</a>      
<a href="/services.php">Services</a>
<a href="/pricing.php">Pricing</a>
<a href="/contact.php">Contact Us</a>
<!--input id="srchbar" type="search" placeholder="Search"-->
</div>
</nav>

https://jsfiddle.net/foeLo3xx/ 1) not zoomed enter image description here

2) Zoomed in on mobile (IPhone 5s) enter image description here

on all devices, (specifically mobile), when the page is zoomed in, the nav zooms as well. How do I keep the nav the same size regardless of the viewport zoom? — blackRob4953, Sep 08 '15 at 17:07
I would suggest you to use percentages(%) for height and width properties. — divy3993, Sep 08 '15 at 17:12
the width is set to 100%, i assumed that would keep it at that percentage and shrink all the elements within, but it doesn't work that way — blackRob4953, Sep 08 '15 at 17:17
Have you added the meta information in the head of your project? — Mario Kurzweil, Sep 08 '15 at 17:23
Can you post a picture of your problem? I think this will help. — Mario Kurzweil, Sep 08 '15 at 17:28
@MarioKurzweil just added the photos. second picture shows the issue, the nav zooms as well, instead of staying normally scaled. I want the nav to stay the same as if it's zoomed out, even though the user zooms in the page. So all of nav can be accessed. — blackRob4953, Sep 08 '15 at 17:32
I found this article on stackoverflow it sounds similar to your problem http://stackoverflow.com/questions/13886763/disable-zoom-on-a-div-but-allow-zoom-on-the-page-an-alternate-div — Mario Kurzweil, Sep 08 '15 at 17:44

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

Unfortunately, there is no good/reliable way of achieving what you want.

One crude way would be to detect the change in zoom level of and then dynamically resize you navbar container to the current screen width. However, achieving this is not trivial. Another answer on how to detect screen size here explains the difficulty.

edited May 23 '17 at 10:26

Community

1
1

answered Sep 08 '15 at 17:43

Pranjal

796
1
8
24

ok, how do I go about the code for that? I'm assuming javascript is needed , I'm new with that and not familiar with it – blackRob4953 Sep 08 '15 at 17:44

CSS How to scale site without nav scaling

1 Answers1