Support » Themes and Templates » Font size changed to 0 to hide main navigation – will it affect SEO?

  • Shr.Khr

    (@shrkhr)


    Hi all
    I am using WP3.5 with the TwentyTwelve theme.

    I am changing my main navigation to use a sprite image which also has hoover images.

    So, I need to hide my default main navigation created by WP in text.
    For this I changed the following CSS property:

    .main-navigation li {
    font-size:0;
    }

    Now, is this a valid way to achieve this objective?
    Most importantly, will this affect SEO?

    Thanks in advance for any suggestions.

Viewing 7 replies - 1 through 7 (of 7 total)
  • esmi

    (@esmi)


    Forum Moderator


    Firstly, do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.Create a child theme for your changes. Or use a custom CSS plugin.

    is this a valid way to achieve this objective? Most importantly, will this affect SEO?.

    No – it’s not valid and Google may well penalise you for trying to hide text using a zero font size as this is the hallmark of keyword spammers.

    Shr.Khr

    (@shrkhr)


    Thanks for your reply esmi.

    Actually, I have been creating a child theme, so that issue is out of the way.

    However, if I should not change the font size, what is a valid way to hide the text menu, what will not affect SEO?

    esmi

    (@esmi)


    Forum Moderator


    Can we see the site?

    Shr.Khr

    (@shrkhr)


    As the site is in my localhost, is there any thing else I can provide you with?

    esmi

    (@esmi)


    Forum Moderator


    Could you post the complete markup from just one of the menu list items here?

    Shr.Khr

    (@shrkhr)


    It is below:

    <li class="current_page_item"><a href="http://localhost/snk/" title="Home">Home</a></li>

    [Edited. Just one menu item please – not the entire page]

    esmi

    (@esmi)


    Forum Moderator


    Assuming that you are using the vanilla (default) wp_nav_menu() to generate this menu, the default function doesn’t include the markup that you really need to do this properly. You need to customise the function’s arguments to add extra <span></span> tags so that:

    <?php wp_nav_menu( array('before' => '<span>', 'after' => '</span>' )); ?>

    will output something like:

    <li class="[default classes here]"><a href="http://localhost/snk/" title="Home"><span>Home</span></a></li>

    Once those span tags are in place, you can target just the link text itself using something like:

    .main-navigation li a span {
    display:inline-block
    position:absolute;
    top:-9999px;
    left:-9999px;
    }

    That will leave the menu texts available to search engines and non-graphical browser users but hide them from the graphical browsers.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Font size changed to 0 to hide main navigation – will it affect SEO?’ is closed to new replies.