I am trying to add CSS from a html theme that I included.

When I add my primary menu function that I defined to load my menu section I don't know how to include CSS as it return a defult ul style.

Note: I implemented my styles correctly, as it works until I add this fucntion.

<header class="header_area">
<div class="main_menu">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container box_1620">
            <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse offset" id="navbarSupportedContent">

                <?php

                if (has_nav_menu('primary')) {
                    wp_nav_menu(array(
                            'theme_location' => 'primary',
                            'container'      => false,
                            'fallback_cb'    => false,
                            'depth'          => 5
                    ));
                }

                ?> ...

My basic function:

function ju_setup_theme() {
register_nav_menu( 'primary',
    __( 'Primary Menu', 'lorahost' )
);
}

And the part I changed:

<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
        <ul class="nav navbar-nav menu_nav justify-content-end">
          <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> 
          <li class="nav-item"><a class="nav-link" href="feature.html">Features</a></li> 
          <li class="nav-item"><a class="nav-link" href="service.html">Service</a>
          <li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a>
          <li class="nav-item submenu dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">Pages</a>
            <ul class="dropdown-menu">
              <li class="nav-item"><a class="nav-link" href="blog.html">Single Blog</a>                 
              <li class="nav-item"><a class="nav-link" href="blog-details.html">Blog Details</a>                 
            </ul>
                        </li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>

How to correctly load CSS? Maybe through arguments?

I am trying to add CSS from a html theme that I included.

When I add my primary menu function that I defined to load my menu section I don't know how to include CSS as it return a defult ul style.

Note: I implemented my styles correctly, as it works until I add this fucntion.

<header class="header_area">
<div class="main_menu">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container box_1620">
            <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse offset" id="navbarSupportedContent">

                <?php

                if (has_nav_menu('primary')) {
                    wp_nav_menu(array(
                            'theme_location' => 'primary',
                            'container'      => false,
                            'fallback_cb'    => false,
                            'depth'          => 5
                    ));
                }

                ?> ...

My basic function:

function ju_setup_theme() {
register_nav_menu( 'primary',
    __( 'Primary Menu', 'lorahost' )
);
}

And the part I changed:

<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
        <ul class="nav navbar-nav menu_nav justify-content-end">
          <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> 
          <li class="nav-item"><a class="nav-link" href="feature.html">Features</a></li> 
          <li class="nav-item"><a class="nav-link" href="service.html">Service</a>
          <li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a>
          <li class="nav-item submenu dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">Pages</a>
            <ul class="dropdown-menu">
              <li class="nav-item"><a class="nav-link" href="blog.html">Single Blog</a>                 
              <li class="nav-item"><a class="nav-link" href="blog-details.html">Blog Details</a>                 
            </ul>
                        </li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>

How to correctly load CSS? Maybe through arguments?

• menus
• css
• navigation
• sub-menu

1 Answer 1

See if I correctly understand your meaning. For argument details, you may wish to refer to wp_nav_menu()

When you call the menu, you may add the following arguments:

wp_nav_menu(array(
        'theme_location' => 'primary',
        'container'      => 'div', // default is div anyway, you set it false because you want to add ID, right?
        'container_id'   => 'container_id', // container id here, css ID for container above

        // comment out if you need
        // 'menu_class'  => 'menu-class-here', // menu class
        // 'menu_id'     => 'menu-id-here',
        'fallback_cb'    => false,
        'depth'          => 5
));