• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 27
  • Last Modified:

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
0
jonathanduane2010
Asked:
jonathanduane2010
  • 5
  • 5
  • 2
1 Solution
 
Marco GasiFreelancerCommented:
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.
0
 
jonathanduane2010Author Commented:
Thanks marco

I wouldnt mind making the email and phone stand out a bit more than the rest
0
 
Edwin HofferTechnical ExpertCommented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Marco GasiFreelancerCommented:
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

0
 
Marco GasiFreelancerCommented:
You can find here a complete list of css content values for Font-Awesome icons: http://astronautweb.co/snippet/font-awesome/
0
 
jonathanduane2010Author Commented:
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

0
 
Edwin HofferTechnical ExpertCommented:
I added the padding code in your code, check it:

<?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 style="padding:7px 30px;">+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

0
 
jonathanduane2010Author Commented:
Thanks Edwin!

I have uploaded but no change
0
 
Marco GasiFreelancerCommented:
Do a hard refresh of your browser: hold Ctrl key and click Reload (or press F5) to reload the whole page.
0
 
jonathanduane2010Author Commented:
still nothing?

Is it different for you?
0
 
Marco GasiFreelancerCommented:
It looks fine in my Chrome, IE and Firefox. Try to close the browser...
0
 
jonathanduane2010Author Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 5
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now