I'm new to WordPress development. I have made a design of the nav menu. I want to create the menu from admin panel and want to get those menus at my front page of the website with my custom CSS. I'm able to create the menu and get those in my front page but can't understand how to get those menu items with my custom CSS and structure.
HTML STRUCTURE
<div class="col-12 log-menu">
<ul>
<li><a href=""><span title="Home">Home</span></a></li>
<li><a href="about"><span title="About">About</span></a></li>
<li><a href="#"><span title="Services">Services</span></a></li>
<li><a href="#"><span title="Careers">Careers</span></a></li>
<li><a href="#"><span title="Contact">Contact</span></a></li>
</ul>
</div>
STYLE
.log-menu ul{
list-style: none;
margin: 0px;
padding: 0px;
float: right
}
.log-menu ul li{
float: left;
margin-right: 10px;
margin-top: 35px;
transform-style: preserve-3d;
}
.log-menu ul li a{
color: #222;
font-weight: 500;
font-size: 20px;
display: block;
text-decoration: none;
position: relative;
}
.log-menu ul li a span{
display: block;
padding: 10px 35px;
}
.log-menu ul li a span::before{
content: attr(title);
position: absolute;
top: 0px;
left: 0px;
background: #f30000;
color: #fff;
padding: 10px 35px;
transform-style: preserve-3d;
transition: .3s;
transform: rotateX(90deg) translateY(50px);
transform-origin: bottom;
}
.log-menu ul li a span:hover::before{
transform: rotateX(0deg) translateY(0px);
}
.log-menu ul li a span::after{
content: attr(title);
position: absolute;
top: 0px;
left: 0px;
background: #fff;
color: #262626;
padding: 10px 35px;
transform-style: preserve-3d;
transition: .3s;
transform: rotateX(00deg) translateY(00px);
transform-origin: top;
}
.log-menu ul li a span:hover::after{
transform: rotateX(90deg) translateY(-10px);
}
function.php
<?php
/* CUSTOMIZED THEME */
function customize_register_nav_menu(){
register_nav_menu('primary','Header Navigation Menu');
}
add_action('after_setup_theme', 'customize_register_nav_menu');
So my question is how can I get the menu items name as <li><a href=""><span title="Home">Home</span></a></li>
title attr value
and anchor tags value
.