WordPress.org

Forums

Font size changed to 0 to hide main navigation - will it affect SEO? (8 posts)

  1. Shr.Khr
    Member
    Posted 2 years ago #

    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.

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    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.

  3. Shr.Khr
    Member
    Posted 2 years ago #

    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?

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    Can we see the site?

  5. Shr.Khr
    Member
    Posted 2 years ago #

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

  6. esmi
    Forum Moderator
    Posted 2 years ago #

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

  7. Shr.Khr
    Member
    Posted 2 years ago #

    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]

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic