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.

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

1 Answer 1

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

6
  • This css is to display menu vertically or you have just given for example ?? Commented Mar 13, 2019 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 Commented Mar 13, 2019 at 9:06
  • Look my edit, the native luma menu, I hanven't that css for vertical one
    – PЯINCƎ
    Commented Mar 13, 2019 at 9:08
  • if you have any tutorial link for vertical css then it will also very helpful to me Commented Mar 13, 2019 at 9:11
  • 1
    you have to declare it in default_head_blocks.xml
    – PЯINCƎ
    Commented Mar 13, 2019 at 9:40

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.