I am trying to create a fixed position navigation bar that is not the full width of the window and that is not attached to the browser window. So at max-width 1200px it stops and stays there and not follows the right border of the browser and below 1200px it is attached to the right side of the browser to fit the window. 

The code below achieves what I just described except it does not allow user to click link that is next to the navigation bar "clickable". That is because of `max-width:1200px` and `width: 100%` which forces my navigation bar to overlap anything else on that page and I would like to fix that somehow.

```css
#navigation {
  position: fixed;
  max-width: 1200px;
  width: 100%;
  z-index: 0;
}
#navigation svg {
  float: right;
}
#navigation svg polyline {
  fill: #F7F7F7;
  stroke: #B9D7D9;
  stroke-width: 2;
}
#navigation ul {
  position: absolute;
  top: 3px;
  right: 0.8rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}
#navigation li {
  float: left;
}
```

```html
<div id="navigation">
  <svg height="50" width="400">
    <polyline points="0,0 400,0 400,50 70,50 0,0" />
  </svg>
  <ul>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<a href="#">Clickable</a>
```

Here is what I want to happen over 1200px window:
[![enter image description here](https://i.stack.imgur.com/JuuHg.png)](https://i.stack.imgur.com/JuuHg.png)

Less than 1200px window:

[![enter image description here](https://i.stack.imgur.com/CTtIX.png)](https://i.stack.imgur.com/CTtIX.png)