asked on

Aligning items in header

Hi guys,

I was wondering how dfo i align the phone number up with the icon here at the site http://newsite.mightyavonradio.com

I was also wondering how would i add in another icon for email beside the phone number, i have the icon here

http://newsite.mightyavonradio.com/wp-content/uploads/2015/04/email.png

Thanks guy

Marco Gasi

Why don't you use the same tecnique used above with social icons: just use FontAweome icons in the :before pseudo-element of a paragraph instead of a anchor element.

jonathanduane2010

ASKER

Thanks marco

I wouldnt mind making the email and phone stand out a bit more than the rest

Edwin Hoffer

Hello jonathanduane,

Add "padding:7px 30px;" in "p" tag i.e. just below <div id="addition-info" style="position: fixed; top: 35px;"> "div"

Hope above answer will solve your query.

Best Regards
Edwin

Marco Gasi

Sorry, probably I don't understand correctly what you mean since my language is not english, but if you want phone and email be more evident, there's no problem at all. You can set the icon color and size easily. If you want, you can use FontAwesome built-in zoom (fa-2x, fa-4x and so on) otherwise you can just set the font-size property in your css:

markup

<h4 class='phone'>953 1 8055 911</h4>

Open in new window

css

.phone::before{
  content: '"\f095"';
  font-size: 1.1em;
  font-color: #000;
}

Open in new window

Marco Gasi

You can find here a complete list of css content values for Font-Awesome icons: http://astronautweb.co/snippet/font-awesome/

jonathanduane2010

ASKER

so just after the P tag here, so after phone number?

<?php if(isset($_POST['flv_submitted'])) {$fields=ot_get_option('contact_fields');if($ymaill=='')$ymaill=ot_get_option('c_email');  torque_send_message($fields,$ymaill);} 
if(isset($_POST['submitted_news'])) {$ymaill=$_POST['news_address'];  torque_send_subs_mail($ymaill);}?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if gte IE 9 ]><html class="no-js ie9" lang="en"> <![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" /><title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php /*favicon*/ $favicon = "#"; if (ot_get_option('favico')) $favicon = ot_get_option('favico'); ?>
<link rel="shortcut icon" href="<?php echo esc_attr($favicon); ?>" type="image/x-icon" /><link rel="apple-touch-icon" href="images/apple-touch-icon.png"><link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<?php	wp_head();  ?>
</head>
<?php 
/* body class */

global $post; if(isset($post->ID)) $postid = $post->ID; global $wp_query;

 if(is_404()){$page_title="404";   } 
 elseif(is_category()){$page_title="category";	}
 elseif(isset($wp_query->post->post_title)){  $page_title = strtolower($wp_query->post->post_title);}
 else {$page_title ="404";}
 $postid= torque_get_page_id($page_title); 
 if( is_single()){$postid=get_the_ID();	} if(is_home() || is_archive() || is_search())  {$out_title=get_the_title( get_option('page_for_posts', true));$postid=torque_get_page_id($out_title);}
 
$plugins = get_option('active_plugins');$required_plugin = 'woocommerce/woocommerce.php';$debug_queries_on = FALSE;
if(is_array($plugins))if ( in_array( $required_plugin , $plugins ) ) {    $debug_queries_on = TRUE;  }
if ($debug_queries_on && is_woocommerce()) {
	if(is_shop())$page_id=woocommerce_get_page_id( 'shop' );
}

 $boxed=ot_get_option("enable_boxed");  
 $class='';$class2='';
 if($boxed=="yes"){$class="flv_boxed";$class2="flv_body";}
 
 /* end body class */
?>
<body <?php body_class("fadein"); ?>>

<?php if(is_home()){
		$out_title=get_the_title(get_option('page_for_posts', true));	
		$our_id=torque_get_page_id($out_title);	
		$postid=$our_id;} ?>
 
<!-- Header -->
<header id="header"> <div class="container"><!-- CONTAINER -->
<!-- Logo -->					
<?php 
$lurl=get_home_url();if(ot_get_option("logo_url")) {$lurl=ot_get_option("logo_url"); }  $logo=ot_get_option("logo");   if($logo==''){$logo= THEME_URL . 'img/logo.png';}
$logo_w=ot_get_option("logo_w");$logo_h=ot_get_option("logo_h");			
?>
<a href="<?php echo esc_url($lurl); ?>" id="nav_logo"><img class="img-responsive" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" src="<?php echo esc_attr($logo); ?>" <?php if($logo_w!=''){ ?> width="<?php echo esc_attr($logo_w); ?>" <?php } ?> <?php if($logo_h!=''){ ?> height="<?php echo esc_attr($logo_h); ?>" <?php } ?>  /></a>


<ul class="socialicons">
    <?php 	$smicons=ot_get_option('social_icons');	if($smicons){   $slides = $smicons;
	foreach ($slides as $slide) {
	echo '<li><a target="'. $slide['social_icon_target'].'"  href="' . $slide['social_icon_url'] . '" title="' . $slide['title'] . '"><i class="fa fa-' . $slide['social_icon_type'] . '"></i></a></li>';
	 }	}	?>
          </ul>
          
<div id="nav_search"><!-- SEARCH -->
            	<form role="search" id="nav_searchbox"  method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
               		<input type="text" class="form-control"   value="<?php echo esc_attr( get_search_query() ); ?>" name="s"  title="<?php echo esc_attr_x( 'Search for:', 'label', 'torque' ); ?>">
             		 <input type="submit" value="Search" class="display_none" />
            		</form>
			</div><!-- SEARCH END -->
            
            <div id="mobile_nav"><a href="#menu"></a></div><!-- MOBILE SELECT NAV -->
            <nav id="menu"><!-- MAIN NAVIGATION -->
            	<div id="addition-info" style="position: fixed; top: 35px;"><h4>Phone Number</h4>
<img src="http://newsite.mightyavonradio.com/wp-content/uploads/2015/04/widget221.png" alt="Phone" style="width:16px;height:43px"></div><p>+353 1 8055 911</p>
		<?php	$menuid=get_nav_menu_locations(); 
		if (torque_isMobile() == TRUE) {
			$menuname = (ot_get_option('mobi_menu'));
			if ($menuname != ''){
			wp_nav_menu( array( 'menu' => $menuname,'container'=>false ,  'walker'=>new torque_description_walker1()) ); 	
			}else{
			if($menuid["primary"]==0){	
			}else{
			wp_nav_menu( array( 'theme_location' => 'primary','container'=>false ,  'walker'=>new torque_description_walker1()) ); }}
			}
			else{
			if(isset($menuid["primary"]) && $menuid["primary"]==0){		
			}else{	wp_nav_menu( array( 'theme_location' => 'primary','container'=>false , 'walker'=>new torque_description_walker1()) ); }	
			} ?>
</nav>
</div>
</header>
<?php

Open in new window

ASKER CERTIFIED SOLUTION

Edwin Hoffer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jonathanduane2010

ASKER

Thanks Edwin!

I have uploaded but no change

Marco Gasi

Do a hard refresh of your browser: hold Ctrl key and click Reload (or press F5) to reload the whole page.

jonathanduane2010

ASKER

still nothing?

Is it different for you?

Marco Gasi

It looks fine in my Chrome, IE and Firefox. Try to close the browser...

jonathanduane2010

ASKER

Brilliant!

Ok so if i want to add in another one for "Mail Us"to the right of "Phone" using

http://newsite.mightyavonradio.com/wp-content/uploads/2015/04/email.png as an icon