1

I want to override top menu CSS and replace it with my own CSS.

I don't know which CSS file is responsible to display top menu.
I only need to override CSS and don't want to make any changes to the top menu.

  • Your top menu is an extension or in theme ? – PЯINCƏ Mar 13 at 8:45
  • default menu provided by magento @PЯINCƏ – Harsh Jayswal Mar 13 at 8:46
  • ok, which theme are you using – PЯINCƏ Mar 13 at 8:47
  • @PЯINCƏ magento luma with sample data – Harsh Jayswal Mar 13 at 8:48
1

The only way that I see is to add some new class in topmenu then you customise your css as you need.

The class name that I added is : topmenu-v2

app/design/frontend/{Vendor}/{yourthemename}/Magento_Theme/templates/html/topmenu.phtml

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<nav class="navigation topmenu-v2" data-action="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?= /* @escapeNotVerified */ $_menu ?>
        <?= /* @escapeNotVerified */ $block->getChildHtml() ?>
    </ul>
</nav>

then :

app/design/frontend/{Vendor}/{yourthemename}/web/css/yourcssname.css

//example:

.navigation.topmenu-v2 {
    background: #878787;
}

.navigation.topmenu-v2 ul{
    ...
}

enter image description here

  • This css is to display menu vertically or you have just given for example ?? – Harsh Jayswal Mar 13 at 9:05
  • if you have any css that will work to display menu vertically it will be great because i am new to magento and not having that much knowledge about frontend css – Harsh Jayswal Mar 13 at 9:06
  • Look my edit, the native luma menu, I hanven't that css for vertical one – PЯINCƏ Mar 13 at 9:08
  • if you have any tutorial link for vertical css then it will also very helpful to me – Harsh Jayswal Mar 13 at 9:11
  • 1
    you have to declare it in default_head_blocks.xml – PЯINCƏ Mar 13 at 9:40

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.