Lookup wp_nav_menu
Simply take the HTML you have now and remove the <ul> or whatever elements you are using to list the menu links. If you want it to be dynamic, your theme template will need something similar to the following placed where you want the links to load in place of what you had in your regular HTML site:
<?php wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => 'menu cf', // class of container (should you choose to use it)
'menu' => __( 'The Main Menu', 'mytheme' ), // nav name
'menu_class' => 'nav top-nav cf', // adding custom nav class
'theme_location' => 'main-nav', // where it's located in the theme
'before' => '', // before the menu
'after' => '', // after the menu
'link_before' => '', // before each link
'link_after' => '', // after each link
'depth' => 0, // limit the depth of the nav
'fallback_cb' => '' // fallback function (if there is one)
)); ?>
You will also have to register your menu (or menus if you do multiple)
register_nav_menus(
array(
'main-nav' => __( 'The Main Menu', 'mytheme' ), // main nav in header
'footer-links' => __( 'Footer Links', 'mytheme' ) // secondary nav in footer
)
);
The base theme I use to build WordPress themes has a separate file where you register the menus and image sizes etc.. Not sure if it would work in functions.php or not as I’ve never tried, but I assume it would. Maybe someone else can chime in to answer that.
The way WordPress creates the navigation should work ok for what you need. Sometimes I hard-code menus when I can’t use the WordPress menu HTML setup. Here is an example of a hard-coded menu, which you could turn into a simplified function if you wanted. The php code is just checking the URL basename to see what page we’re currently on and add a class to that <li> so that the <li> and <a> tags can be easily styled.
<nav>
<ul>
<?php if(basename(get_the_permalink())=='about') { echo '<li class="current-menu-item"><a class="icon-about">'; } else echo '<li><a class="icon-about" href="/blog/">';?>About</a></li>
<?php if(basename(get_the_permalink())=='services') { echo '<li class="current-menu-item"><a class="icon-service">'; } else echo '<li><a class="icon-service" href="/services/">';?>Services</a></li>
<?php if(basename(get_the_permalink())=='contact') { echo '<li class="current-menu-item"><a class="icon-contact">'; } else echo '<li><a class="icon-contact2" href="/social/">';?>Contact</a></li>
</ul>
</nav>
Hope that helps point you in the right direction.