How do I display menu in header without loosing styles?

Question

I have downloaded a template and trying to convert it into the wordpress theme. How do I add the menu in wordpress and not loose styles that are applied to it?

I have this code in my header.php

<div
                class="collapse navbar-collapse main-menu-item justify-content-center"
                id="navbarSupportedContent"
              >
                <ul class="navbar-nav align-items-center">
                  <li class="nav-item">
                    <a class="nav-link" href="index.php">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="about-us.php">About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="services.html">services</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="blog.html">Blog</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle"
                      href="blog.html"
                      id="navbarDropdown"
                      role="button"
                      data-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false"
                    >
                      Pages
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="project.html">project</a>
                      <a class="dropdown-item" href="single-blog.html"
                        >Single blog</a
                      >
                      <a class="dropdown-item" href="elements.html">Elements</a>
                    </div>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                </ul>
              </div>

I tried registering menu but in doing so I am loosing all my styles and menu just appears in simple text format. There is also an effect that make the header navigation bar sticky and changes color when it is scrolled.

I tried to register menu using this

//add menu support
add_theme_support('menus');

//register menu support
register_nav_menus(

    array(
        'top-menu' => __('Top Menu','theme'),
    )

)

How do I solve this?

Answer 1

In order to convert a plain html template into a working WordPress-theme you need to do more than just "a couple of steps".

To answer your question:

Option 1)

Custom Menu Walker

Besides the work of converting the rest of the template, you need to write your custom menu walker class in order to meet the mark-up of given template. That is the PHP-class, which will render your menu in the frontend.

Option 2)

Edit the styles (css) of the template

The other way around would be to use the default markup of the menu-output and just edit the CSS of the template, which you have purchased. That is less complicated compared to option 1.

See:

WP Nav walker Core docs

Tutorial Walker Class

I have been working for more than six years with WordPress now and even after that amount of time I still don't know all the functions and possibilites of it.

So, my/the bottom line is: you should mentally prepare that this will be a long trip, learning WP. Learn WordPress templating first.

The good news: there are tutorials all over the internet about every thinkable topic.

Start by having a look at the core page for theme development