How would I go about separating and re-positioning an element?

  • tankerray · Member ·

    Hey, This is what I’m trying to do… I added the text “MENY” next to toggle (nav-trigger). However I don’t like the positioning of >MENY<, formatting/style is alright but the text needs to be more in the middle in relation to the toggle icon. They’re stuck together as it is now. How do I separate them so I can adjust (raise(lower)) the text “MENY”? I keep messing it up so any guidance is much appreciated!!

    How it is now (image): http://i.stack.imgur.com/pzoBG.png

    how I’d like it (image): http://i.stack.imgur.com/2SoL8.png

    My Header PHP 

    <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">
    <span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px;  font-weight: 700;">MENY</span> 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">

    The html generated by the PHP script 

    <a href="#" id="nav-trigger" class="thb-loaded" style="margin-top: 30.5px;">
  <span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m
</a>
  • supportbot · Member ·

    You did not specify a blog address or reason for posting when you created this topic.

    This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

    If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

    If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

    This is an automated message.

  • The topic ‘How would I go about separating and re-positioning an element?’ is closed to new replies.