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 '19 at 8:45
  • default menu provided by magento @PЯINCƏ – Harsh Jayswal Mar 13 '19 at 8:46
  • ok, which theme are you using – PЯINCƏ Mar 13 '19 at 8:47
  • @PЯINCƏ magento luma with sample data – Harsh Jayswal Mar 13 '19 at 8:48

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


<?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() ?>

then :



.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 '19 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 '19 at 9:06
  • Look my edit, the native luma menu, I hanven't that css for vertical one – PЯINCƏ Mar 13 '19 at 9:08
  • if you have any tutorial link for vertical css then it will also very helpful to me – Harsh Jayswal Mar 13 '19 at 9:11
  • 1
    you have to declare it in default_head_blocks.xml – PЯINCƏ Mar 13 '19 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.