Fixed Navigation at the Top with Fixed Width
-
Hello everyone. I've created a navigation menu at the top of the document which is fixed when scrolling. Everything works fine for me on my computer. Now I'm considering that not all persons will open the page with displays as wide as mine. I resized the browser window to be smaller to see the effect. I realised that when the window becomes smaller, navigation menus that do not fall within the length of the visible part of the document wraps to the next line which is outside the coloring of the navigation at the top. I'm looking for a way to force those menus to be shown on a single navigation line so that the user will have to scroll horizontally in order for those menus to be shown. I have set the width of the navigation to 100% to compensate for wide screens. It's left with how to make them appear on the same line but visible on scrolling on small screens. I want to know how to solve this. Thanks in advance.
-
Hello everyone. I've created a navigation menu at the top of the document which is fixed when scrolling. Everything works fine for me on my computer. Now I'm considering that not all persons will open the page with displays as wide as mine. I resized the browser window to be smaller to see the effect. I realised that when the window becomes smaller, navigation menus that do not fall within the length of the visible part of the document wraps to the next line which is outside the coloring of the navigation at the top. I'm looking for a way to force those menus to be shown on a single navigation line so that the user will have to scroll horizontally in order for those menus to be shown. I have set the width of the navigation to 100% to compensate for wide screens. It's left with how to make them appear on the same line but visible on scrolling on small screens. I want to know how to solve this. Thanks in advance.
PLAY with the CSS - without seeing your whole document, I can't give you a guaranteed way to make it work... but it's a combination of overflow: scroll, and possibly white-space: nowrap. You are going to have to experiment with what tags to place those on - that's what doing CSS is about. If you've already made an attempt, you would know we can't give you the answer to this and make sure it will work.