7

I made some modifications on the top navigation menu in Blank theme.

I need to change the position of the submenu. I try to find some JavaScript but no luck, then I see this in the Magento_Theme/templates/html/topmenu.phtml

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

How I can change the position, I need to move submenu a little bit at top maybe 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>

enter image description here

  • its CSS tweaks not .phtml file changes , change css for that and if you could share your URL then I can tell the exact CSS class and value... – Manoj Deswal Nov 2 '17 at 4:48
  • Hi thanks, but is Magento default Blank theme so you can find the css without share my url. – Robert Nov 2 '17 at 5:47
  • inspect your navigation and take a screen shot of that .both navigation and inspected code .....will help me little ...so at least share that .. – Manoj Deswal Nov 2 '17 at 5:52
  • please take a look I add the html to my post to see the div's – Robert Nov 2 '17 at 6:13
  • take a look now – Robert Nov 2 '17 at 6:30
9

You need to add below css in your custom CSS / LESS file . I think I have already stated you before how to add custom CSS / LESS.

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

enter image description here

  • Cheers ! @Robert , you should always inspect in browser to check these kind of things ..so you will start to solve these things at your own . – Manoj Deswal Nov 2 '17 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.