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

Improve this question
6
  • 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
    Commented Nov 2, 2017 at 4:48
  • Hi thanks, but is Magento default Blank theme so you can find the css without share my url.
    – Robert
    Commented Nov 2, 2017 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
    Commented Nov 2, 2017 at 5:52
  • please take a look I add the html to my post to see the div's
    – Robert
    Commented Nov 2, 2017 at 6:13
  • take a look now
    – Robert
    Commented Nov 2, 2017 at 6:30

1 Answer 1

Reset to default
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

Improve this answer
1
  • 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
    Commented Nov 2, 2017 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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