Convert HTML code to WordPress menu-369IT编程

admin管理员组
文章数量:1130349

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?

Share Improve this question edited Oct 23, 2018 at 8:49 fuxia♦ 107k39 gold badges255 silver badges461 bronze badges asked Oct 23, 2018 at 8:14 Stayll 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.

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?

Share Improve this question edited Oct 23, 2018 at 8:49 fuxia♦ 107k39 gold badges255 silver badges461 bronze badges asked Oct 23, 2018 at 8:14 Stayll 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.

本文标签： Convert HTML code to WordPress menu

版权声明：本文标题：Convert HTML code to WordPress menu 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://it.en369.cn/questions/1749239459a2337834.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

Convert HTML code to WordPress menu

1 Answer 1

1 Answer 1

更多相关文章