Gabriel Nazoa Gabriel Nazoa - 3 months ago 7
CSS Question

Duplicating a wordpress navigation menu

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:

enter image description here

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:

enter image description here

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

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>