Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to change Top-Menu default class?

See original GitHub issue

Reproduction link

Demo

Demo screenshot

234

Steps to reproduce

I am trying to make mega menu after lots of debugging I ended up that changing default value of class cdk-overlay-pane will give me the result that I’m looking for, unfortunately for some reason that I’m not aware of changing that class default values from menu-top-component.scss will not take place and I had to place my code in global.scss in order to work.

232

Issue

Changing cdk-overlay-pane values in global.scss will effect other parts such as dropdowns which is not in my interest.

Question

How can I change that class values to only effect my top-menu style and not the rest of the app.
Alternatively is there any possible way to add extra class into my top menu div and place my style codes into menu-top-component.scss?

What is expected?

Changing cdk-overlay-pane values without effecting rest of app.

What is actually happening?

Either effect all component or not work at all!

Environment	Info
ng-zorro-antd	10.1.2
Browser	Firefox

Issue Analytics

State:
Created 3 years ago
Comments:9 (1 by maintainers)

Top GitHub Comments

1reaction

stygian-desolatorcommented, Nov 30, 2020

Maybe nz-popover is more suitable

What do you mean? For navbar using popover?!

Since it is displaying complex content on overlay, nz-popover may be more suitable than nz-sub-menu in this scenario, or add a custom class by looking for ancestor elements.

0reactions

robertnicjoocommented, Dec 1, 2020

@stygian-desolator Thanks man I’ve used popover its much more better than default classes, not what I was looking for exactly but good enough for now.

Top Results From Across the Web

Changing the class name of joomla top menu - Stack Overflow

Now copy there default.php file from modules\mod_menu\tmpl . Open the file and change line. <ul class="menu<?php echo $class_sfx;?>". to. <ul class="nav" .

How to override top menu css in Magento 2?

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

How do you change the color in top menu (header)

First, remove the custom code from wherever you put it. Then go to Header.html and edit it. Find %%Panel.TopMenu%% and put <div class=" ......

Navbar - Bootstrap

Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar . See the display utility...

Editing menu (top menu or main menu) - nopCommerce

Generally, the main menu includes a list of categories. So you can edit category name to change topmenu item names. ... Save it...