CSS Fixed header - Can't access tabs when zooming in

css, html

Solution

Do not use fixed width for your `header`, use `100%` instead:

#top {
    background-color: #1b1b1b;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

    width: 100%;
    height: 70px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
}
header {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0 auto;
}

Updated Fiddle

Problem

I used the `position` value `fixed` in order for the header to remain in place when the user scrolls down. The problem is that if I zoom in I can't see or access some of my tabs for example: Is there a way to zoom in and still be able to see and access my tabs? My code: JSFIDDLE CODE HTML: ``` <div id="top"> <header> <hgroup> <h1>LOGO</h1> </hgroup> <nav> <ul> <li class="tabs"><a href="#">First</a></li> <li class="tabs"><a href="#">Second</a></li> <li class="tabs"><a href="#">Third</a></li> <li class="tabs"><a href="#">Fourth</a></li> </ul> </nav> </header> ``` CSS: ``` #top { background-color: #1b1b1b; box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 20px 100px; width: 100%; height: 70px; z-index: 99999; position: fixed; top: 0; left: 0; } header { position: relative; width: 440px; height: 70px; margin: 0 auto; } header hgroup { position: absolute; display: block; top: 5px; left: -50px; } header hgroup h1 { font-size: 50px; color: #fff; display: block; height: 100px; width: 610px; } nav { float: right; } nav ul li:hover > ul { display: block; } nav ul { margin-top: 10px; padding: 0 20px; list-style: none; position: relative; display: inline-table; margin-right: -80px; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { color: #fff; } .tabs:hover { border-bottom: 5px solid #fff; } nav ul li a:hover { color: #fff; } nav ul li a { display: block; padding: 15px 15px; font-family: 'PT Sans', sans-serif; color: #fff; text-decoration: none; } ```

Original source