I want to implement a fixed menu that stays fixed to the right of the screen, and stays there as I scroll through the page. It works fine.

.menu { position: fixed; top: 120px; right: 30px;}

But when the browser dimensions change, the menu overlaps on the content. Is there a way I fix it, so that it does not happen.

I appreciate any help.


2 answers

olivaw 0


If you could provide a link that would make it easier for us to figure out a solution.

However, I reckon your problem is that you are setting the 'top' and 'right' position using pixels. You might find that if you use '%' instead of 'px' your menu will better adjust to a change in screen size.

Nevertheless you would be better off not using 'top' and 'right' at all and try to position the menu in relation to other elements (by using margin for example).

The least elegant solution would be to use CSS3 media queries. This would allow you to set a different 'top' and 'right' based on a user's screen width. Media queries are supported in most modern browsers but not in IE.

Answered about 6 years ago by olivaw
Ktash 1851

Javascript would be one way to implement this as you have it. Basically, just change the positioning of the element if it starts to overlap the content, using an onscroll event, and onresize event to manage the menu's position.

Now, onto a CSS/HTML solution. You can wrap your menu in an element, place it in the body element of the page, and use the following styling for it:

.menu {
    float: right;
    width: 200px; /* This will likely need to be set explicitly (see below) */
    margin-right: 30px;
.menu_wrapper {
    position: fixed;
    top: 120px;
    right: 0px;
    width: 100%;
    min-width: 960px; /* This will need to be the width of the content plus the width of the menu */

This will wrap it in an element that spans the width of the page. Now, here comes the issue with doing it this way. You will want to make sure the content element is on a z-index above the .menu_wrapper, otherwise, some browsers may not let you click on links that reside directly to the left of the menu.

Answered about 6 years ago by Ktash