How to add CSS class to <li> and <a> and id in a nav menu with code?

admin管理员组

文章数量:1332873

I have registered nav menu. here is the code

<?php 
                    wp_nav_menu(
                            array (
                                    'theme_location' => 'top-menu',
                                    'menu_id' => 'navbarSupportedContent',
                                    'menu_class' => 'navbar-nav ml-auto',
                                    'container' => 'ul',
                                
                            )
                );  ?>

but <li> and <a> have classes that are not applied to the nav menu wordpress code. so how to add them?

<li id="f-one" class="nav-item"><a class="nav-link" href="#home">Home</a></li>

so any of f-one id or nav-item, nav-link added to the wordpress nav menu style. how to add them please?

I have registered nav menu. here is the code

<?php 
                    wp_nav_menu(
                            array (
                                    'theme_location' => 'top-menu',
                                    'menu_id' => 'navbarSupportedContent',
                                    'menu_class' => 'navbar-nav ml-auto',
                                    'container' => 'ul',
                                
                            )
                );  ?>

but <li> and <a> have classes that are not applied to the nav menu wordpress code. so how to add them?

<li id="f-one" class="nav-item"><a class="nav-link" href="#home">Home</a></li>

so any of f-one id or nav-item, nav-link added to the wordpress nav menu style. how to add them please?

• menus
• css

Share Improve this question edited Jun 29, 2020 at 5:46 mozboz 2,62811 gold badge1212 silver badges2323 bronze badges asked Jun 28, 2020 at 14:49 socialsocial 7133 silver badges99 bronze badges 4

• Have you tried something like mentioned here, with CSS selector that picks out specifically the items you want to style wpbeginner/wp-themes/… – mozboz Commented Jun 28, 2020 at 17:31
• thanks for reply. yes I had already checked their topic before I posted my topic here. but they used the dashboard to add css while I want to add css styles with code. also my classes above already exists in the theme style.css but just not working. there are no spaces between links like home, blog ...and other nav links in the nav menu. so I think the nav-link class not working – social Commented Jun 28, 2020 at 18:59
• are you happy with adding styles to style.css? or you want to add the CSS itself using PHP too? I think as in their 'Method 2' it should be possible to do it with just CSS - it would be helpful to add the CSS you're trying to your question – mozboz Commented Jun 28, 2020 at 19:02
• thank you. I just have changed the theme after reseting. that was the problem and it is solved now and the style is as it is. – social Commented Jun 28, 2020 at 19:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

thank you. I just have changed the theme after reseting. that was the problem and it is solved now and the style is as it is.

本文标签： How to add CSS class to ltligt and ltagt and id in a nav menu with code