if you click the button “left”, left munu will be shown.
if you click the button “right”, right munu will be shown.
if you click the button “the page title”, center munu will be shown.
If you click the button “x”, all menu relates will be disappeared.
So far so good
However,
When the dynamic title “the page title” becomes shorter to “title” or the dynamic notice becomes very shorter,
the vertical position of “title” goes up in the http://form.kr/q/swap38/ with the desktop google chrome or the desktop microsoft edge.
How can I make it NOT to go up although the dynamic “page of the title” or the dynamic “notice” is very short?
You have to change the flex-direction of the parent otherwise you keep adding flex-children in the horizontal direction when you want extra boxes on the vertical direction. You then need to align the items to the center because of the change of axis.
You don’t need all that extra js to hide the elements as you can just set button-wrap to display:none and all its children will automatically be hidden. We also mentioned not to change the style attribute directly especially when you already have css classes set up to toggle the display as required. Get js to add the class and then let CSS handle the display.
There are four black background buttons, i.e, “left”, “right”, “title”, and “x” at http://form.kr/q/swap/39/.
If you put your mouse on the button, “left”, “right”, or “title”, the background color of the button turn to red.
However, if you put your mouse on the button, “x”, the background color is still in black.
Can I make it the four black background buttons turn to red as all same when your mouse is on each of them?
