Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I added a Wordpress blog on a website. This is how it looks so far: http://alweso.2ap.pl/blog/?m=201403
I would like to get rid of the header area - for the menu to be on top, so it resembles the non-Wordpress pages. I'm a complete newbie if it comes to PHP - what should I remove or add? I'm guessing I should play with header.php, so here's the code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class() ?>>
<div id="wrapper">
<header id="header">
<<?php pinboard_title_tag( 'site' ); ?> id="site-title">
<?php if ( ( '' != get_header_image() ) && ( false != get_header_image() ) ) : ?>
<a href="<?php echo home_url( '/' ); ?>" rel="home">
<img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()->width / 2 ) : get_custom_header()->width ); ?>" height="<?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()->height / 2 ) : get_custom_header()->height ); ?>" />
</a>
<?php endif; ?>
<a class="home" href="<?php echo home_url( '/' ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</<?php pinboard_title_tag( 'site' ); ?>>
<?php if( ! is_active_sidebar( 1 ) ) : ?>
<<?php pinboard_title_tag( 'desc' ); ?> id="site-description"><?php bloginfo( 'description' ); ?></<?php pinboard_title_tag( 'desc' ); ?>>
<?php endif; ?>
<?php get_sidebar( 'header' ); ?>
<div class="clear"></div>
<nav id="access">
<a class="nav-show" href="#access">Show Navigation</a>
<a class="nav-hide" href="#nogo">Hide Navigation</a>
<?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
<div class="clear"></div>
</nav><!-- #access -->
</header><!-- #header -->
<?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
This function showing your nav menu, show you have to call this function , wherever you want to show the menu.
with CSS it can be done, in your style.css (/blog/wp-content/themes/pinboard/style.css)
ADD change next:
#site-title {
margin: 0 3.4%;
font-family: "Oswald", sans-serif;
font-size: 32px;
letter-spacing: 1px;
}
into:
#site-title {
margin: 0 3.4%;
font-family: "Oswald", sans-serif;
font-size: 32px;
letter-spacing: 1px;
visibility: hidden;
height: 0px;
}
and:
#site-title, #site-description {
margin: 0;
font-weight: 300;
float: left;
line-height: 150px;
}
into:
#site-title, #site-description {
margin: 0;
font-weight: 300;
float: left;
line-height: 150px;
visibility: hidden;
height: 0px;
}
and:
#header #searchform {
float: right;
margin: 60px 3.4% 0 3px;
}
into:
#header #searchform {
visibility: hidden;
}
it will give this result:
Related
I have a problem when making a wordpress theme cannot responsive when zooming and open on Internet Explorer/Edge and got worst result after tested on many devices like screenshot below:
Cannot compatible with IE/Edge:
Cannot responsive when zooming:
Index.php
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* #link https://codex.wordpress.org/Template_Hierarchy
*
* #package test
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php endif; ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
?>
<?php endwhile; ?>
<?php the_posts_navigation(); ?>
<?php else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Header.php
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
global $woocommerce;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'gg' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<nav id="site-navigation" class="main-navigation2" role="navigation">
<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><?php esc_html_e( 'Top Menu', 'gg' ); ?></button>
<ul class="mini-cart">
<li> <a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" title="<?php esc_attr_e('View your shopping cart'); ?>" class="cart-parent">
<div class="bubblex">
<div class="inside">
<div class="inside-text">
<?php
echo sprintf(_n('%d', '%d', $woocommerce->cart->cart_contents_count), $woocommerce->cart->cart_contents_count);
?></div>
</div>
</div>
<i class="cart_control">::before</i></a>
<?php
echo '<ul class="cart_list">';
echo '<li class="cart-title"><b>Isi Keranjang:</b></li>';
if (sizeof($woocommerce->cart->cart_contents)>0) : foreach ($woocommerce->cart->cart_contents as $cart_item_key => $cart_item) :
$_product = $cart_item['data'];
if ($_product->exists() && $cart_item['quantity']>0) :
echo '<li class="cart_list_product"><a href="' . esc_url( get_permalink( intval( $cart_item['product_id'] ) ) ) . '">';
/* echo $_product->get_image(); */
echo apply_filters( 'woocommerce_cart_widget_product_title', $_product->get_title(), $_product ) . '</a>';
if($_product instanceof woocommerce_product_variation && is_array($cart_item['variation'])) :
echo woocommerce_get_formatted_variation( $cart_item['variation'] );
endif;
echo '<span class="quantity">' . $cart_item['quantity'] . ' × ' . woocommerce_price( $_product->get_price() ) . '</span></li>';
endif;
endforeach;
else: echo '<li class="empty">' . __( 'Keranjang kosong') . '</li>'; endif;
if ( sizeof( $woocommerce->cart->cart_contents ) > 0 ) :
echo '<li class="total">';
echo '<span class="amount2">Subtotal</span>' . $woocommerce->cart->get_cart_total() . '</li>';
echo '<p class="buttons">Detail Checkout</p>';
endif;
echo '</ul>';
?>
</li> </ul>
<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu' ) ); ?>
</nav><!-- #site-navigation -->
<div class="site-branding">
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php endif; ?>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'gg' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #site-wrapper -->
</header><!-- #masthead -->
<div id="content" class="site-content">
Style.css
body {
/* margin: 0 170px 0 20px; */
max-width: 100%;
background: #fff;
margin-left: auto;
margin-right: auto;
}
body {
background-image: url('img/background.png');
background-size: 960px 1600px;
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
}
#media only screen and (max-width: 1200px)
#content {
background-color: #FFFFFF;
}
site-content {
margin: 107px 23.5%;
}
.main-navigation2 {
float: none;
height: 59px;
margin: -18px 196px;
font-size: 12px;
/* font-style: normal; */
}
For further information please check out on development link.
So how I can fix it?
Apply some global styles without media queries then work backwards depending on resolution needs with media queries.
I made some minor changes to your css while viewing in 1200 wide and it fixed the menu issue perfectly. When zooming, it defaulted to the relevant media query.
.main-navigation {
width: 960px;
margin: auto;
}
.menu-primary-menu-container {
margin: 0 0 0 200px;
float: right;
}
ul#primary-menu {
margin: 0px;
}
.main-navigation li {
float: left;
}
.main-navigation a {
padding: 4px 29px 0 16px;
display: block;
text-decoration: none;
/* line-height: 50px; */
color: #000;
font-family: sans-serif;
font-weight: bold;
font-size: small;
}
Bootstrap is a better approach, but I see you've already put some fair amount of work into this theme. This might not be a complete solution, but in theory if you make some minor adjustments as I did below, you can then adjust them as needed for varying viewport sizes in CSS media query.
I placed 2 pictures (facebook and youtube) to my header, however, the problem now is they seems not click-able despite they are links and when view in mobile, they are blocked by the contact number on the top.
http://seaicf.com
I'm out of idea on how to fix this, can anyone help?
Here's my header.php until the line where I insert the pictures:
<body <?php body_class(); ?>>
<div id="page-container">
<?php
if ( is_page_template( 'page-template-blank.php' ) ) {
return;
}
$et_secondary_nav_items = et_divi_get_top_nav_items();
$et_phone_number = $et_secondary_nav_items->phone_number;
$et_email = $et_secondary_nav_items->email;
$et_contact_info_defined = $et_secondary_nav_items->contact_info_defined;
$show_header_social_icons = $et_secondary_nav_items->show_header_social_icons;
$et_secondary_nav = $et_secondary_nav_items->secondary_nav;
$primary_nav_class = 'et_nav_text_color_' . et_get_option( 'primary_nav_text_color', 'dark' );
$secondary_nav_class = 'et_nav_text_color_' . et_get_option( 'secondary_nav_text_color', 'light' );
$et_top_info_defined = $et_secondary_nav_items->top_info_defined;
?>
<?php if ( $et_top_info_defined ) : ?>
<div id="top-header" class="<?php echo esc_attr( $secondary_nav_class ); ?>">
<div class="container clearfix">
<div class="container clearfix">
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/images/logo.png';
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
</a>
<?php if ( $et_contact_info_defined ) : ?>
<div id="et-info">
<?php if ( '' !== ( $et_phone_number = et_get_option( 'phone_number' ) ) ) : ?>
<span id="et-info-phone"><?php echo esc_html( $et_phone_number ); ?></span>
<?php endif; ?>
<?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
<span id="et-info-email"><?php echo esc_html( $et_email ); ?></span>
<?php endif; ?>
<?php
if ( true === $show_header_social_icons ) {
get_template_part( 'includes/socialGoogle analytic_icons', 'header' );
} ?>
</div>
</div> <!-- #et-info -->
<ul class="et-social-icons">
<div><img src="http://seaicf.com/wp-content/uploads/2015/02/facebooklike.png" width="75" height="25"/> <img src="http://seaicf.com/wp-content/uploads/2015/02/youtube.png" width="75" height="25"></div>
Updated with the CSS that controls the classes in that header:
#top-header .container {
padding-top: 10px;
}
.container {
text-align: left;
margin: 0 auto;
width: 1080px;
position: relative;
}
media="all"
#top-header .et-social-icons {
float: right;
display: inline-block;
margin-top: -37px;
-moz-margin-top: 5px;
-webkit-margin-top: 5px;
}
Trying to float the two wrappers to the right makes things hard. It is easier to just have one left column on the left and one on the right. In the one on the right you can then place add an extra wrapper div to have the social media buttons appear under the phone number:
<div class="container clearfix">
<a href="http://seaicf.com/%e9%a6%96%e9%a1%b5/">
<img src="http://seaicf.com/wp-content/uploads/2015/02/logo-75.png" alt="ISI MonQ Academy" id="logo">
</a>
<div id="et-info">
<div>
<span id="et-info-phone">1800-800-800</span>
<span id="et-info-email">info#seaicf.com</span>
</div>
<ul class="et-social-icons">
<div>
<img src="http://seaicf.com/wp-content/uploads/2015/02/facebooklike.png" height="25" width="75">
<img src="http://seaicf.com/wp-content/uploads/2015/02/youtube.png" height="25" width="75">
</div>
</ul>
</div>
</div>
Floating things is complicated, just replace the classes you made with this:
.container {
text-align: right;
margin: 0px auto;
width: 1080px;
position: relative;
}
#top-header .et-social-icons {
margin-top: 10px;
}
#et-info {
font-size: 20px;
}
i have a menu in the left and i want the site-content resize by changing the screen size. actually like in https://myspace.com/
what i have now:
the menu in the left side. this is the code:
.main-navigation {
background-color: #000000;
border-left: 1px solid #cccccc;
display: block;
float: left;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: normal;
max-width: 50%;
position: absolute;
top: 85px;
width: 150px;
height: auto;
text-align: right;
text-transform: capitalize;
}
the site-content i putted margin-left 150px to put the content after the menu because if not, the content is under the menu. :
.blog .site-content,
.archive .site-content,
.search .site-content {
margin: 0 auto;
max-width: 885px;
position: relative;
left: 0px;
margin-left: 150px;
}
and the article that inside:
.blog .site-content .hentry,
.archive .site-content .hentry,
.search .site-content .hentry {
float: left;
margin: 0;
overflow: hidden;
width: 295px;
height: 295px;
}
the main-index is:
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', 'home' );
?>
<?php endwhile; ?>
<?php pictorico_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>
the nav(menu) is in the header so the header:
<?php wp_head(); ?>
>
<header id="masthead" class="site-header" role="banner">
<div class="site-header-inner">
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-toggle"><span class="screen-reader-text"><?php _e( 'Menu', 'pictorico' ); ?></span></h1>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'pictorico' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
<div class="header-search">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<?php if ( is_home() && pictorico_has_featured_posts( 1 ) ) : ?>
<?php get_template_part( 'content', 'featured' ); ?>
<?php elseif ( get_header_image() && ( is_home() || is_archive() || is_search() ) ) : ?>
<div class="hentry has-thumbnail">
<div class="entry-header">
<div class="header-image" style="background-image: url(<?php header_image(); ?>)">
<span class="screen-reader-text"><?php bloginfo( 'name' ); ?></span>
</div>
</div>
</div>
<?php endif; ?>
<div id="content" class="site-content">
It's a bit late to implement now, but next time look at something like Bootstrap or Zurb Foundation for frameworks that make it really fast to build responsive web apps. They take away the need for complicating things with media queries. Just a thought
Your content is not going to re-size because you have given it a fixed width (295px). Since you floated them, they should just re-arrange themselves based on how much room there is in site-content.
If you actually want the articles to re-size, give them percentage widths. Then, as site-content changes width, they will also.
If you want to keep the aspect ratio (height/width), then you need a wrapper that maintains the aspect ratio using % padding and put the content in it using postion: absolute. See, for example, Maintain the aspect ratio of a div with CSS.
I'm playing with html and css to make the home link of my header covering only the left half of the header size. Each time I'm resizing the Home Link, it changes my header size. I thought it was because they're in the same div so I put the
<img class="header-logo"...</>
above the
<a class="home-link"...</a>
and put it in its own div and gave a brand new id to the logo. Unfortunately that made my header wider which I don't want to. How would you proceed to reduce the homelink size?
I'm using Wordpress and its twentythirteen default theme.
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
Here is a sample of the related CSS:
.site-header {
margin:10px auto 0 auto;
max-width:980px;
padding:0;
background-size: 980px auto;
}
.site-header .home-link {
min-height: 50px;
}
.header-logo {
max-width:60%;
display:block;
padding-top:3px;
padding-bottom:5px;
position:relative;
}
header logo,title and description are all nested inside the .home-link. So changing the homelinks will have impact on the child classes.You might try the code below where you can style individual classes without affecting the other classes.
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"></a>
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
Why do you put so many classes in your html : why not
<header id="masthead" class="site-header" role="banner">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
</a>
then
/* css */
.site-header {
margin:10px auto 0 auto;
/* max-width:980px; not needed : the visitor's choice...*/
padding:0;
background-size: 980px auto;
}
.site-header > a {
min-height: 50px;
width : 50%; /* site header link will cover only
a half of the header, the containing div */
}
.site-header > img {
max-width:60%;
display:block;
padding-top:3px;
padding-bottom:5px;
position:relative;
}
This is what I used in the end:
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" /></a>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
and
.site-header .home-link {
min-height: 169px;
max-width:50%;
position:static;
left:-250px;
}
Now everything seems OK, but not exactly, the responsiveness is broken and the menu is not resizing at low screen resolution because of the min-height: 169px; CSS property that I need otherwise the logo is out of the header section. One problem solved, here comes a new one. Edit: I still haven't figured out a solution for this.
I added the text "MENY" next to the toggle (nav trigger) since I thought it would be confusing for desktop visitors when visiting my site. However I can't seem to get the text to line up nicely with the toggle icon. How do I lower or raise the text next to the icon so it looks good?
Here's the .php:
<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
Image of issue can be found here: [a link]http://i41.tinypic.com/2jd3l9k.png (not enough rep to add images)
Also, if there's a way to bring them closer together... but that's just a bonus!
Thanks for all help! I'm a beginner trying to learn. :)
Entire header.php >nav-trigger<
<?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
<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">
Create a div with the image in it.
Create a div with the text in it.
<div class='myimage'><img src='yourimg'></div>
<div class='menytext'>meny</div>
.menytext{float:left;margin:0 0 0 -50px} (for example)
Float the text div over the image and then you will be able to position the text however you like.
because inline tag has a space, you can add between them, like
<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>