Magento 2 - Ändern Sie die Positionen des Navigationsuntermenüs

7

Ich habe einige Änderungen am oberen Navigationsmenü im leeren Thema vorgenommen.

Ich muss die Position des ändern,submenu. ich versuche etwas zu finden, JavaScriptaber kein Glück, dann sehe ich das in derMagento_Theme/templates/html/topmenu.phtml

<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"right top","at":"right bottom"}}}'>

Wie ich die Position ändern kann, muss ich das Untermenü ein wenig nach oben verschieben, vielleicht 10px.

<nav class="navigation" data-action="navigation">
<ul id="ui-id-5" class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" tabindex="0" aria-activedescendant="ui-id-15">
<li class="level0 nav-1 first level-top parent ui-menu-item" role="presentation">
<a id="ui-id-6" class="level-top ui-corner-all" href="http://example.com/priming.html" aria-haspopup="true" tabindex="-1" role="menuitem">
<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>
<span>Priming</span>
</a>
<ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none; top: 62px; left: -0.466675px;" role="menu" aria-expanded="false" aria-hidden="true">
<li class="level1 nav-1-1 first ui-menu-item" role="presentation">
<a id="ui-id-12" class="ui-corner-all" href="http://example.com/priming/materials.html" tabindex="-1" role="menuitem">
<span>Materials</span>
</a>
</li>
<li class="level1 nav-1-2 ui-menu-item" role="presentation">
<li class="level1 nav-1-3 ui-menu-item" role="presentation">
<li class="level1 nav-1-4 ui-menu-item" role="presentation">
<li class="level1 nav-1-5 ui-menu-item" role="presentation">
<li class="level1 nav-1-6 ui-menu-item" role="presentation">
<li class="level1 nav-1-7 ui-menu-item" role="presentation">
<li class="level1 nav-1-8 ui-menu-item" role="presentation">
<li class="level1 nav-1-9 ui-menu-item" role="presentation">
<li class="level1 nav-1-10 last ui-menu-item" role="presentation">
</ul>
</li>
<li class="level0 nav-2 level-top parent ui-menu-item" role="presentation">
<li class="level0 nav-3 level-top parent ui-menu-item" role="presentation">
<li class="level0 nav-4 level-top parent ui-menu-item" role="presentation">
<li class="level0 nav-5 level-top parent ui-menu-item" role="presentation">
<li class="level0 nav-6 last level-top parent ui-menu-item" role="presentation">
</ul>
</nav>

Geben Sie hier die Bildbeschreibung ein

Robert
quelle
Seine CSS-Optimierungen ändern keine .phtml-Datei, ändern CSS dafür und wenn Sie Ihre URL teilen könnten, dann kann ich die genaue CSS-Klasse und den genauen Wert
angeben
Hallo danke, aber Magento ist das Standard-Blank-Thema, sodass Sie das CSS finden können, ohne meine URL zu teilen.
Robert
Überprüfen Sie Ihre Navigation und machen Sie einen Screenshot von dieser .navigation und inspiziertem Code ..... wird mir wenig helfen ... also teilen Sie zumindest das ..
Manoj Deswal
Bitte werfen Sie einen Blick Ich füge das HTML zu meinem Beitrag hinzu, um die Divs zu sehen
Robert
Werfen Sie jetzt einen Blick
Robert

Antworten:

9

Sie müssen unten CSS in Ihre benutzerdefinierte CSS / LESS-Datei einfügen. Ich glaube, ich habe Ihnen bereits zuvor erklärt, wie Sie benutzerdefiniertes CSS / LESS hinzufügen können.

 .navigation .level0 .submenu{
    top:30px !important;  <!-- adjust this value as you required, this is just for sample-->
}

Geben Sie hier die Bildbeschreibung ein

Manoj Deswal
quelle
Prost ! @Robert, du solltest immer im Browser nachsehen, um diese Art von Dingen zu überprüfen. Also wirst du anfangen, diese Dinge selbst zu lösen.
Manoj Deswal