Fixed element ignores scrolling horizontally - html

Question

I'm creating website and I have a small problem. At the end I set min-width: 1200px. When I change my internet browser to smaller resolution and scrolling horizontally, it does not affect to my menu items! How can I fix it?
#page{
width: 1200px; height:1000px;
}
#page #primaryMenu {
min-width: 1200px;
background-color: #151414;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center;
font-size: 14px;
width: 100%;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px black;
}
#page #primaryMenu li {
display: inline-block;
margin: 20px 10px;
cursor: pointer;
}
#page #primaryMenu li a {
text-decoration: none;
color: white;
transition: 0.65s;
}
#page #primaryMenu li a:hover {
transition: 0.5s;
color: #d10239;
}
<div id="page">
<ul id="primaryMenu">
<li>STRONA GŁÓWNA</li>
<li>FRYZJERSTWO</li>
<li>KOSMETYKA</li>
<li>SOLARIUM</li>
<li>GALERIA</li>
<li>KONTAKT</li>
</ul>
</div>
EDIT
I don't want to do my website responsive, I want to set it with min-width 1200px; to all devices. Its menu sticks to the top and I don't want to follow vertical scroll.Example: When i change web browser resolution to 200x200 and try to scroll to the right, my menu(list items) stays in the same position.

Answer 1

The problem is when you are giving min-width in pixels it actually taking 1200px of the width.
If you are trying to achieve responsive design then use percentage.
Example: for #page #primarymenu use width as 100% or your desired value (in percentage). Then it will work just fine with all size screens
width:100%;
or
min-width:90%

Answer 2

position: fixed; on #page #primaryMenu : you are asking the browser to display your primary menu at a given x, y offset from the top left corner of the screen, scrolling or not.
Check the documentation about css position.
fixed :
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
If I understand correctly, you want a fixed position on the vertical scroll so that the menu will be sticky to the viewport's top, and normal positioning on the horizontal scroll so the menu viewed by scrolling.
I don't think it can be done in with a css only solution, but check theses questions :
Position element fixed vertically, absolute horizontally
CSS: fixed position on x-axis but not y?

Answer 3

delete min-width: 1200px; and it will work fine

Answer 4

GOT SOLUTION IN JS: jsfiddle.net/vy8rbsv6/1