Add "MENU" (text) next to toggle?

StackOverflow https://stackoverflow.com/questions/20599065

Pergunta

I'm using the Bigfoot theme http://themes.thehappybit.com/themes/bigfoot/ and I'm stuck trying to figure out how to add "MENU" next to the toggle trigger on my webpage's desktop version.I think it's kind of confusing for desktop visitors as it is now. Where would I manage this? Any guidance is much appreciated!

Here's a reference of what I'm looking after/trying to accomplish: http://themes.thehappybit.com/themes/rockford/

header php & toggle php

<!doctype html>
<html <?php language_attributes(); ?> <?php thb_html_class(); ?>>
<head>
    <?php thb_head_meta(); ?>

    <title><?php thb_title(); ?></title>

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

    <?php thb_body_start(); ?>

    <div id="page">

        <?php thb_header_before(); ?>

        <header id="header">
            <?php thb_header_start(); ?>

            <div class="header-container">

                <div class="wrapper">
                    <?php
                        $logo = thb_get_option('main_logo');
                        $logo_2x = thb_get_option('main_logo_retina');

                        if( !empty($logo['id']) && !empty($logo_2x['id']) ) : ?>
                        <?php $logo_metadata = wp_get_attachment_metadata($logo['id']); ?>
                        <style>
                            @media all and (-webkit-min-device-pixel-ratio: 1.5) {
                                #logo {
                                    background-image: url('<?php echo thb_image_get_size($logo_2x['id'], 'full'); ?>');
                                    background-size: <?php echo $logo_metadata['width']; ?>px, <?php echo $logo_metadata['height']; ?>px;
                                }

                                #logo img { visibility: hidden; }
                            }
                        </style>

                        <?php endif;
                    ?>
                    <h1 id="logo">
                        <a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                            <?php if( isset($logo['id']) && $logo['id'] != '' ) : ?>
                                <img src="<?php echo thb_image_get_size($logo['id'], 'full'); ?>" alt="">
                            <?php else : ?>
                                <?php bloginfo( 'name' ); ?>
                            <?php endif; ?>
                        </a>
                    </h1>

                    <?php thb_nav_before(); ?>

                    <a href="#" id="nav-trigger">m</a>

                    <div class="nav-wrapper">
                        <nav id="main-nav" class="main-navigation primary">
                            <?php thb_nav_start(); ?>

                            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

                            <?php thb_nav_end(); ?>
                        </nav>

                        <nav id="mobile-nav" class="main-navigation primary">
                            <?php thb_nav_start(); ?>

                            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

                            <?php thb_nav_end(); ?>
                        </nav>
                    </div>
                    <?php thb_nav_after(); ?>
                </div>
            </div>

            <div class="wrapper">

toggle php

<div class="thb-shortcode thb-toggle <?php echo implode(' ', $class); ?>">
<h1 class="thb-toggle-trigger">
    <?php echo $title; ?>
</h1>

<div class="thb-toggle-content">
    <?php echo thb_text_format($content, true); ?>
</div>

Foi útil?

Solução

Try this something like that:

<a href="#" id="nav-trigger">
    <span style="font-family: Arial;">MENU</span> m
</a>

The problem you are having is that the menüicon is not an inline- or background-image but a font character. The a-tag uses a font in wich the m stands for this menuicon. So putting another element inside the a-tag and giving it another font-family should do the trick.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top