I have been hours trying to align this absurd code. How can I align the menu to the right?
var k = 0; function fnclick() { document.documentElement.style.setProperty("--display", k? "none": "block"); k = 1 - k; }
:root { --display: none; --width: 30%; --height: 5%; --bgcolor1: #222222; --bgcolor2: #222299; --bgcolor3: #2222FF; font-family: Arial; font-size: 14px; } a:hover, a#mnu:hover { background-color: var(--bgcolor2); } a:active, a#mnu:active { background-color: var(--bgcolor3); } body {} a { display: var(--display, block); display: block; width: var(--width); height: var(--height); padding: 5px; background-color: var(--bgcolor1); text-decoration: none; text-align: center; color: #FFFFFF; } div#navbar { border: 1px solid #ff1100; display: flex; top: 0px; right: 0px; position: fixed; margin-top: 10px; margin-right: 10px; justify-content: center; align-items: center; } a#mnu { display: block; width: 10%; height: var(--height); padding: 2px; background-color: var(--bgcolor1); color: #FFFFFF; border: 0px; }
<div id="navbar"> <a id="mnu" onclick="fnclick()">☰</a> <a id="mnuExit" onclick="mnuRefr()">Exit</a> <a id="mnuRefr" onclick="mnuRefr()">Refresh</a> <a id="mnuOpts" onclick="mnuOpts()">Chart Options</a> <a id="mnuSlct" onclick="mnuSlct()">Select Channels</a> <a id="mnuSave" onclick="mnuSave()">Save Snapshot</a> <a id="mnuHalt" onclick="mnuHalt()">Halt Plot</a> </div> <div>This absurd text keeps moving with every action of the menu, and do not keep QUIET, since the menu do not float freely over the text....</div>
Let's say I have an element with class alignRight
<div class="alignRight"> My Menu Item </div>
Now write some css for the above element
div.alignRight{
display: flex;
top: 0px;
right: 0px;
position: fixed;
margin-top: 10px;
margin-right: 10px;
justify-content: center;
align-items: center;
}
Here are 3 important lines
top: 0px;
right: 0px;
position: fixed;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.