Duplicating a wordpress navigation menu

Question

I am making my first steps learning to code. I made some courses of html, php, css, javascript and MySql. Now I decided to continue learning from the practice while I build a Wordpress child theme.

The thing is that I'm trying to learn how to overlay two different font families in the same div. I mean something like this:

I discover that it's something possible to do with css using content: attr(data-title);

For example:

.button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
  display: inline-block;
  height: 42px;
  padding: 0 1.5em;
  position: relative;
  border: none;
  outline: 0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  line-height: 44px;
  color: #000000;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.button:after {
  content: attr(data-title);
  z-index: 1;
  font-size: 30px;
  color: #f00;
  font-weight: 100;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet">
<a href="javascript:void(0);" class="button" data-title="ABC">ABC</a>

Now my big problem is that I'm working with Wordpress and the php is a little more complex. What I would like to do is to have two different fonts for each menu item. For example:

This is the code php of my menu:

<?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">

            <?php
                wp_nav_menu( array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'primary-menu',
                ) );
            ?>
        </nav>
<?php endif; ?>

And this is the css:

.main-navigation {
    font-family: pcablack;
    font-size: 30px;
     word-spacing: -5px;
    /*position: relative;*/
    position: absolute;
    z-index: 1000;
    padding-bottom: 20px;
    margin-top: 48px;
    margin-left: 40px;
}

I tried to make this but it doesn't work as I expect. It seems that maybe there is a syntax problem:

<?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>"

        data-title= '

            <?php
                wp_nav_menu( array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'primary-menu',
            ) );
            ?>'
        >

            <?php
                wp_nav_menu( array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'primary-menu',
                ) );
            ?>
        </nav>
<?php endif; ?>

then the css:

.main-navigation {
    font-family: pcablack;
    font-size: 30px;
     word-spacing: -5px;
    /*position: relative;*/
    position: absolute;
    z-index: 1000;
    padding-bottom: 20px;
    margin-top: 48px;
    margin-left: 40px;
}

.main-navigation:after {
    content: attr(data-title);
    font-family: pcabold;
    color: green;
    font-size: 30px;
     word-spacing: -5px;
    /*position: relative;*/
    position: absolute;
    z-index: 1100;
    padding-bottom: 20px;
    margin-top: 48px;
    margin-left: 40px;
}

It doesn't work. It only shows me console errors. Do you have some recommendation?

Maybe there is an easiest way to duplicate the font of a menu item and overlay it?

Other problem is that my menu is an accordion menu. So if I open a section of one of the menus that I duplicate the other menu should be automatically open too.

Answer 1

OMG, you doing this wrong.

You need copy only menu items titles to data attribute. SO for example:

$('.main-menu ul a').each(function() {
  var text = $(this).html();
  $(this).attr('data-title', text);
});

.main-menu li a {
  position:relative;
   font-family: "Arial Black";
  font-size: 15px;
}

.main-menu li a:after {
    content: attr(data-title);
    position:absolute;
    font-family: "Arial Black";
    display:block;
  font-size: 14px;
    z-index:1;
    left:0;
    top:0;
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-menu">
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Why</a></li>
		<li><a href="#">Contacts</a></li>
	</ul>
</nav>