GetSimple Support Forum

Full Version: GS 3.4 Having Span inside native menu "a" elmt
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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...centering/

Can you add the SPAN Shawn ?
Span where and why, not sure what you need a span for.
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.firefoxuserconten...ca8cc7.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?
Can you not just do that in css?
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.)
(2018-12-02, 21:23:04)Carlos Wrote: [ -> ]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.
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
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.firefoxuserconten...43f751.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...
Ok I think I get it now, yeah i would just use a custom menu generator.