Convert HTML code to WordPress menu

I have this HTML

    <div class="navbartop">
  <a href="/">Home</a>
  <div class="subnavtop">
    <button class="subnavtopbtn">Alfabetic <i class="fa fa-caret-down"></i></button>
    <div class="subnavtop-content">
      <a href="#a">A</a>
      <a href="#team">Team</a>
      <a href="#careers">Careers</a>
    </div>
  </div> 
  <div class="subnavtop">
    <button class="subnavtopbtn">Services <i class="fa fa-caret-down"></i></button>
    <div class="subnavtop-content">
      <a href="#bring">Bring</a>
      <a href="#deliver">Deliver</a>
      <a href="#package">Package</a>
      <a href="#express">Express</a>
    </div>
  </div> 
  <div class="subnavtop">
    <button class="subnavtopbtn">Partners <i class="fa fa-caret-down"></i></button>
    <div class="subnavtop-content">
      <a href="#link1">Contact me for Partners</a>
      <a href="#link2">Partners</a>
      <a href="#link3">Partners</a>
      <a href="#link4">Partners</a>
      <a href="#link1">Partners</a>
      <a href="#link2">Partners</a>
      <a href="#link3">Partners</a>
      <a href="#link4">Partners</a>
    </div>
  </div>
  <a href="contact.php">Contact</a>

And CSS

/* ---------------- NavTop ---------------- */
.navbartop {
    overflow: hidden;
    background-color: #000; 
}
.navbartop a {
    float: left;
    font-size: 14px;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}
.subnavtop {
    float: left;
    overflow: hidden;
}
.subnavtop .subnavtopbtn {
    font-size: 14px;    
    border: none;
    outline: none;
    color: white;
    padding: 12px 14px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbartop a:hover, .subnavtop:hover .subnavtopbtn {
    background-color: red;
}

.subnavtop-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: #61414180;
    width: 100%;
    z-index: 1;
}

.subnavtop-content a {
    float: left;
    color: white;
    text-decoration: none;
}

.subnavtop-content a:hover {
    background-color: #eee;
    color: #000;
}

.subnavtop:hover .subnavtop-content {
    display: block;
}

How to change the code for a WordPress custom menu?

I have this HTML

    <div class="navbartop">
  <a href="/">Home</a>
  <div class="subnavtop">
    <button class="subnavtopbtn">Alfabetic <i class="fa fa-caret-down"></i></button>
    <div class="subnavtop-content">
      <a href="#a">A</a>
      <a href="#team">Team</a>
      <a href="#careers">Careers</a>
    </div>
  </div> 
  <div class="subnavtop">
    <button class="subnavtopbtn">Services <i class="fa fa-caret-down"></i></button>
    <div class="subnavtop-content">
      <a href="#bring">Bring</a>
      <a href="#deliver">Deliver</a>
      <a href="#package">Package</a>
      <a href="#express">Express</a>
    </div>
  </div> 
  <div class="subnavtop">
    <button class="subnavtopbtn">Partners <i class="fa fa-caret-down"></i></button>
    <div class="subnavtop-content">
      <a href="#link1">Contact me for Partners</a>
      <a href="#link2">Partners</a>
      <a href="#link3">Partners</a>
      <a href="#link4">Partners</a>
      <a href="#link1">Partners</a>
      <a href="#link2">Partners</a>
      <a href="#link3">Partners</a>
      <a href="#link4">Partners</a>
    </div>
  </div>
  <a href="contact.php">Contact</a>

And CSS

/* ---------------- NavTop ---------------- */
.navbartop {
    overflow: hidden;
    background-color: #000; 
}
.navbartop a {
    float: left;
    font-size: 14px;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}
.subnavtop {
    float: left;
    overflow: hidden;
}
.subnavtop .subnavtopbtn {
    font-size: 14px;    
    border: none;
    outline: none;
    color: white;
    padding: 12px 14px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbartop a:hover, .subnavtop:hover .subnavtopbtn {
    background-color: red;
}

.subnavtop-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: #61414180;
    width: 100%;
    z-index: 1;
}

.subnavtop-content a {
    float: left;
    color: white;
    text-decoration: none;
}

.subnavtop-content a:hover {
    background-color: #eee;
    color: #000;
}

.subnavtop:hover .subnavtop-content {
    display: block;
}

How to change the code for a WordPress custom menu?

• menus

Share Improve this question edited Oct 23, 2018 at 8:49 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Oct 23, 2018 at 8:14 StayllStayll 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

If you want to display a custom menu, you need to use the wp_nav_menu function. I'm also assuming you have registered a custom menu with the register_nav_menus function eg:

register_nav_menus(
   array(
      'main-menu' => 'Main Menu',
   )
);

A basic example would be

wp_nav_menu(array(
   'menu'            => 'Main Menu',
   'theme_location'  => 'main-menu',
   'container'       => 'nav',
));

Change theme_location to match whatever you set in register_nav_menus.