Circle menu im header einer mobile Seite verschiebt andere Elemente

[klausw]

Hallo,

Das Circle Menu funktioniert in der section einer Mobilseite. Allerdings sind die Kreise und Icons der Pushbuttons noch etwas nach unten verschoben (siehe buttons.png).

Jetzt habe ich versucht ein Circle Menu in die Headerleiste zu bringen:

Code Auswählen Erweitern


        <header id="header-nav" class="bg-lightgray row">
<div data-type="slideout" class="col-1-8 big center-align notouch"></div>
<div id="linkname" class="col-3-6 large bold center-align middle"></div>
<!-- Testsymbol in Kopfzeile -->
<div data-type="symbol" data-icon="fa-bell" data-device="dummy2" data-get-on="on.*" data-get-off="off" class="col-1-6 right-align big black"></div>
<!-- Anwesenheitsstatus -->
<div data-type="circlemenu" data-direction="vertical" class="col-1-6">
    <ul>
      <li><div data-type="symbol" data-device="anwetest" data-icons='["fa-home","fa-suitcase","fa-fire"]' data-colors='["","",""]' data-get-on='["home","absent","gone"]'></div></li>
      <li><div data-type="push" data-device="anwetest" data-set="state" data-set-on="absent" data-icon="fa-suitcase"></div></li>
      <li><div data-type="push" data-device="anwetest" data-set="state" data-set-on="gone" data-icon="fa-fire"></div></li>
      <li><div data-type="push" data-device="anwetest" data-set="state" data-set-on="home" data-icon="fa-home"></div></li>
    </ul>
</div>
        </header>


Dummerweise verschieben sich dadurch alle anderen Elemente (Slideoutbutton und Symbole) nach unten (siehe header.png).

Wie bekomme ich das wieder gerade gerückt?

[setstate]

Uff, das war eine harte Nuss. Habe es jetzt aber hinbekommen mit einer circlemenu Optimierung. Mit einem Update sollte sich das Thema lösen.

[klausw]

Uff, das war eine harte Nuss. Habe es jetzt aber hinbekommen mit einer circlemenu Optimierung. Mit einem Update sollte sich das Thema lösen.

Glaube ich dir, ich hatte vor der Threaderöffnung ewig rumprobiert wie ich es mit Styles hinbekomme.
Sieht jetzt super aus.

Eine Kleinigkeit vielleicht noch:
wenn ich circlemenu und symbol mit gleichem Icon nebeneinander habe fällt es auf, das beide nicht auf einer Höhe sind.
Mit "margin-top: -4px;" Passt es genau. Ich habe es erstmal so eingebaut, weil ich nicht genau weiss, wo es in die css muss:
Um die Ringe der Pushbuttons zu zentrieren habe ich style="vertical-align: unset;" hinzugefügt.

Code Auswählen Erweitern

<div data-type="symbol" data-icon="fa-suitcase" data-device="dummy2" data-get-on="on.*" data-get-off="off" class="col-1-6 right-align big black"></div>
<!-- Anwesenheitsstatus -->
<div class="col-1-6">
<div data-type="circlemenu" data-direction="vertical" class="class="col-1-6"">
    <ul>
      <li><div style="margin-top: -4px;" data-type="symbol" data-device="anwetest" data-icons='["fa-home","fa-suitcase","fa-fire"]' data-colors='["","",""]' data-get-on='["home","absent","gone"]'></div></li>
      <li><div style="vertical-align: unset;" data-type="push" data-device="anwetest" data-set-on="absent" data-icon="fa-suitcase"></div></li>
      <li><div style="vertical-align: unset;" data-type="push" data-device="anwetest" data-set-on="gone" data-icon=""></div>10°</li>
      <li><div style="vertical-align: unset;" data-type="push" data-device="anwetest" data-set-on="gone" data-icon="fa-fire"></div></li>
      <li><div style="vertical-align: unset;" data-type="push" data-device="anwetest" data-set-on="home" data-icon="fa-home"></div></li>
    </ul>
</div>
</div>