How to override top menu css in Magento 2?

Question

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.

Answer 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{
    ...
}