-1

Hi I'm using an html5 off canvas menu that i got here ---> http://callmenick.com/_development/material-menu/

In the css the hamburger menu is set to be fixed at the top left of the page. I want to change that and be able to place the hamburger menu wherever I would like.

Now I have tried to remove the fixed position and the absolute position but that just collapsed the hamburger icon and made it one line instead of three.

Here is the html of the part I'm trying to fix. 

.mm-menu-toggle {
position: fixed;
top: 12px;
left: 12px;
z-index: 20;
width: 24px;
height: 18px;
background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px);
background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px);
font-size: 0;

}

.mm-menu-toggle::before,
.mm-menu-toggle::after {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #212121;
content: "";
}

Does anyone have any idea as to how I can achieve being able to place the menu wherever I would like.

If you go to the link about there is a github link with all the files and css of the menu.

Here is an image of what I mean. The top is how the menu looks. But when I took position:fixed; and position:absolute; from the css the bottom picture is what was given.

How can I fix this.

Terrell Anderson
  • 53
  • 1
  • 7

2 Answers2

0

You do

.mm-menu-toggle {
    position: absolute;
}

instead of

.mm-menu-toggle {
    position: fixed;
}
Midas
  • 7,012
  • 5
  • 34
  • 52
0

Position: fixed of .mm-menu-toggle takes the element out of document's flow pinning it to the page at certain location so that it follows the window even when scrolling. Changing value of position attribute will allow you to reposition it as desired.

Position set to absolute will take out the element from document's flow and let you position it using attributes such as top, left, bottom, right etc. The element will however stay at specified location on page and will not follow user's screen when scrolling.

Position set to relative will put the element back into document's flow making it appear after and before HTML elements just like you have it your document and will not follow user's screen when scrolling. It can then be repositioned using float and so on just like most HTML elements.

Example (position: absolute):

.mm-menu-toggle {
    position: absolute;
    right: 10px;
    top: 20px;
}

Example (position: relative):

.mm-menu-toggle {
    position: relative;
    float: right;
    margin-top: 20px;
}
Ninetou
  • 704
  • 1
  • 7
  • 15