Making the menu icon float using CSS

griffinwildlife · Member · Feb 17, 2016 at 1:08 pm
Copy link

Add topic to favorites
Hi,

I’m trying to get the menu icon to float on the page to stay in the same position on the screen as you scroll down…. maybe even changing the icon itself too…. does anyone know if this is possible to do? I’m quite a newbie to CSS customisation, so help would be greatly appreciated!

The blog I need help with is: (visible only to logged in users)
madeincosmos · Member · Feb 17, 2016 at 5:21 pm
Copy link
Hi, I am afraid there are a few possible problems that could arise if we kept the menu icon in the same position on the screen.

1. On mobile screens, the icon would overlap with page content. Here is how it would look like on Iphone 4: http://pasteboard.co/1CQfcHBG.png

2. In the mobile version of your site, the menu always appears in the same place – right under the header. This means that if we moved just the menu icon along while scrolling the page, the menu would not be visible if we opened it. I am afraid that changing the position of the whole menu may turn out impossible without the use of JavaScript. (I’m not 100% sure about that, but for sure such change would be messy).

3. On PC the icon could stay in the top right corner without overlapping with the page content. However, it doesn’t have a fixed background color, so it would look different in the header (with grey background) than on top of an article (with white background).

Summing up, I would recommend:
1. Keep the menu icon where it is on all mobile layouts.
2. Pin it to its position on big screens, if you are OK with the difference in looks (here is an example: http://pasteboard.co/1CRLYqld.png ).

To achieve 2., add the following code to your custom css:
```
media screen and (min-width: 68em) {
    .menu-toggle {
        position: fixed;
    }
    .menu-toggle.toggle-on {
        right: 320px;
    }
}
```

No items found.