Fixed element ignores scrolling horizontally

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><a href="index.html">STRONA GŁÓWNA</a></li>
    <li><a href="fryzjerstwo.html">FRYZJERSTWO</a></li>
    <li><a href="kosmetyka.html">KOSMETYKA</a></li>
    <li><a href="solarium.html">SOLARIUM</a></li>
    <li><a href="galeria.html">GALERIA</a></li>
    <li><a href="kontakt.html">KONTAKT</a></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.

Are you sure you want a *min-width* of 1200px ? Don't you mean just 1200px for all devices ? — Gabriel Glenn, Sep 19 '16 at 15:47
When i change web browser resolution to 200x200 and try to scroll to the right, my menu(list items) stays in the same position. — Tomsz Comasz, Sep 19 '16 at 16:00
Yes, this is the `fixed` behavior. Full project won't help : we won't be fixing your project, we are helping your to solve one specific issue. I create a [jsfiddle](https://jsfiddle.net/411fcc00/1/) for you. Try to illustrate your issue there. — Gabriel Glenn, Sep 19 '16 at 16:19
important to add: #page{ width: 1200px; height:1000px; } at begining. Try it now — Tomsz Comasz, Sep 19 '16 at 16:28
So, do you what a sticky menu like [this](http://stickyjs.com/), or a regular menu like [that](http://bienvenue-travel.com/) ? — Gabriel Glenn, Sep 20 '16 at 07:50
That sticky plugin almost do what I want. Look at their webpage, next set web browser to 300x300. Scroll to the right and menu moves with webpage. Thats great, but when You go down, menu stays on position and dosent move horizontally with webpage . Do you see? — Tomsz Comasz, Sep 20 '16 at 11:51

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

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 :

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 19 '16 at 15:27

Gabriel Glenn

1,174
1
13
30

what instead of position:fixed should i use? – Tomsz Comasz Sep 19 '16 at 15:31
Well, I'm not sure what you are trying to do. Is it a sticky menu that follow the vertical scroll, a simple top page menu, ... ? What is the expected behavior ? – Gabriel Glenn Sep 19 '16 at 15:35
Yes, its menu sticky to the top and It dont want to follow vertical scroll. – Tomsz Comasz Sep 19 '16 at 15:37
Maybe we don't understand each other, but to me, a sticky menu does follow the vertical scroll and stays displayed at the same spot on the page. Anyway, I think @Karthi might be right on this one. Check his answer. – Gabriel Glenn Sep 19 '16 at 15:40
So how to make it follow th the vertical scroll? – Tomsz Comasz Sep 19 '16 at 15:45
In this case, `fixed` is the way to go ;) - and `width: 1200px` to set your menu to the proper size. Maybe a jsfiddle will help collaborate. – Gabriel Glenn Sep 19 '16 at 15:51

score 0 · Answer 2 · edited Sep 19 '16 at 15:47

0

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%

edited Sep 19 '16 at 15:47

Gabriel Glenn

1,174
1
13
30

answered Sep 19 '16 at 15:35

Karthi Keyan

137
1
9

score -1 · Answer 3 · answered Sep 19 '16 at 15:26

-1

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

answered Sep 19 '16 at 15:26

Md Sifatul Islam

846
10
28

yet the nav does not change when i change the width of the screen! – Md Sifatul Islam Sep 20 '16 at 15:30

score -1 · Accepted Answer · answered Sep 20 '16 at 13:05

-1

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

answered Sep 20 '16 at 13:05

Tomsz Comasz

123
1
8

Please document your answer to help others. – Gabriel Glenn Sep 21 '16 at 13:38

Fixed element ignores scrolling horizontally

4 Answers4