GS 3.4 Having Span inside native menu "a" elmt

[zekoolweb]

Hi, very good work Shawn, testing the V 3.4, i notice there is no SPAN inside native menu :

<nav id="main-nav">
 <ul>
   <li class="index current active">
     <a href="http://localhost/gs34/" title="Welcome to GetSimple!">Home</a>
   </li>

This is very useful when you have to full center x and y absis the word of the link.
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Can you add the SPAN Shawn ?

[shawn_a]

Span where and why, not sure what you need a span for.

[zekoolweb]

hi, the SPAN needs to be there :

<li>
<a>
<SPAN> text shown </SPAN>
</a>
</li>

Why : do you see the red block in the picture, https://screenshotscdn.firefoxusercontent.com/images/f06b9a6e-7338-4c82-ab94-7a89d0ca8cc7.png
this is the A. (click zone) The LI is green border.

problem is, the A is not full width and full height, so hit zone is smaller than the user can expect.

With a SPAN, we can get A full and then center horizontally and vertically the SPAN (the text only, not the hitbox).

You can add this is 3.4 Shawn?

[shawn_a]

Can you not just do that in css?

[Carlos]

If you can't do it with CSS as Shawn suggests, another way could be this:

Create a functions.php file in your theme folder and paste this in the file:

Code:

<?php defined('IN_GS') or die();

add_filter('menuitems','add_span_to_nav_links');
function add_span_to_nav_links($nav='') {
  return str_replace('##TMP##','"><a',str_replace(array('">','</a>'),array('"><span>','</span></a>'),str_replace('"><a','##TMP##',$nav)));
}
// end

(If you theme already had a functions.php file, paste in it everything but the first line.)

[zekoolweb]

If you can't do it with CSS as Shawn suggests, another way could be this:

Create a functions.php file in your theme folder and paste this in the file:

Code:

<?php defined('IN_GS') or die();

add_filter('menuitems','add_span_to_nav_links');
function add_span_to_nav_links($nav='') {
 return str_replace('##TMP##','"><a',str_replace(array('">','</a>'),array('"><span>','</span></a>'),str_replace('"><a','##TMP##',$nav)));
}
// end

(If you theme already had a functions.php file, paste in it everything but the first line.)

THX, i will try this tomorrow. have a nice day you both guys.

[shawn_a]

I just dont really see the reasoning here, you can change the display mode of an li and a in css if you need a to not be inline use block

[zekoolweb]

Hi, thanks Carlos, this save my day, Shawn i can explain to you the reasoning there :
the span allows me to perfectly center the word, nonetheless, i give user bigger hitbox.
see the following screenshot
https://screenshotscdn.firefoxusercontent.com/images/f520ac7c-9403-4cdc-a7c0-3c8eee43f751.png
cyan = link (hitbox)
green = span (the word)

this is why i asked for this SPAN element to be native in the 3.4.
this is the only way i know to have this result easily...

[shawn_a]

Ok I think I get it now, yeah i would just use a custom menu generator.