Add text to header

  • Can anybody please help me with some css to add a few lines of text on the right side of the white header? I want to put the hours of operation under the telephone number and e-mail address. There seems to be space, maybe a lot of padding, but not a way that I can see in customizing the child theme.
    Thanks!
    This is my site:
    https://www.hersheylibrary.org

Viewing 5 replies - 1 through 5 (of 5 total)

  • First of all I hope you have created your own child theme.

    If so, copy top-header.php from wp-content/themes/modality folder to your theme folder’s root.

    For example, if your child theme folder is named as modality-child then copy the above file to root of modality-child folder.

    Now open the file from your child theme folder and after Line number 14, create a blank container <div></div> and put your desired text inside it.

    So now the HTML should like like:

    
<div class="top-right right">
   <span class="top-phone"><i class="fa fa-phone"></i><?php echo esc_attr($modality_theme_options['header_phone']); ?></span>
   <span class="top-email"><i class="fa fa-envelope"></i><a href="mailto:<?php echo esc_attr($modality_theme_options['header_email']); ?>"><?php echo esc_attr($modality_theme_options['header_email']); ?></a></span>
   <div>Put your text here...</div>
</div>

    Remember, you may need to add a fixed width for the container you are putting text in as I don’t think <div class="top-right right"></div> has a width set.

    I hope this should be it!

    Thread Starter hmahraj

    (@hmahraj)

    Thank you so much. Yes, I have a child theme but am only used to adding css to the style sheet in the Modality child theme editor. I can see how to change the file to the header. php but am afraid of messing it up. Is there any way I can send you a screenshot and you can “talk me through it”, please?

    Screenshot of what? If it is from your website, I can access it already. If this is something else you are referring to, you can send it.
    Thank you!

    Thread Starter hmahraj

    (@hmahraj)

    child theme header php

    It sounds like I need to create a container to make this change. That explains <div></div>.
    Does this go in the child theme editor header.php file? If so, where? Line 14 you mention, I can only see when I view the the html of website’s page source. I get the following goes inside:

    <div class="top-right right">
   <span class="top-phone"><i class="fa fa-phone"></i><?php echo esc_attr($modality_theme_options['header_phone']); ?></span>
   <span class="top-email"><i class="fa fa-envelope"></i><a href="mailto:<?php echo esc_attr($modality_theme_options['header_email']); ?>"><?php echo esc_attr($modality_theme_options['header_email']); ?></a></span>
   <div>Put your text here...</div>
</div>

    Just know where to put it. If you can see from the image link I sent of the child theme editor, it might explain something. Alternatively, there is this, the “Edit the Theme Modality Child Header (header.php)” editor page?

    <?php
/**
 * The Header of the theme.
 *
 * Displays all of the <head> section and everything up till <main id="main">
 *
 * @package Modality
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="grid-container">
	<div class="clear"></div>
		<?php $modality_theme_options = modality_get_options( 'modality_theme_options' );
		if ($modality_theme_options['header_top_enable'] == '1') {
			get_template_part( 'top', 'header' );
		} ?>
		<?php if (get_header_image()!='') { ?>
			<div id="header-holder" style="background: url(<?php echo esc_url(header_image()); ?>) 50% 0 no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
		<?php } else { ?>
			<div id="header-holder">
		<?php } ?>
			<div id ="header-wrap">
      			<nav class="navbar navbar-default">
					<div id="logo">
						<?php if ( $modality_theme_options['logo'] != '' ) { ?>
							<a href="<?php echo esc_url( home_url( '/' ) ) ?>"><img src="<?php echo esc_url($modality_theme_options['logo']); ?>" alt="<?php echo esc_attr($modality_theme_options['logo_alt_text']); ?>"/></a>
							<?php if ($modality_theme_options['enable_logo_tagline'] == '1' ) { ?> 
								<h5 class="site-description"><?php echo esc_attr(bloginfo('description')); ?></h5>
							<?php } ?>
						<?php } else { ?>
							<a href="<?php echo esc_url( home_url( '/' ) ) ?>"><?php esc_attr(bloginfo( <code>name</code>)); ?></a>
							<?php if ($modality_theme_options['enable_logo_tagline'] == '1' ) { ?> 
								<h5 class="site-description"><?php echo esc_attr(bloginfo('description')); ?></h5>
							<?php } ?>
						<?php } ?>
					</div>
        			<div class="navbar-header">
            			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              			<span class="sr-only">Toggle navigation</span>
              			<span class="icon-bar"></span>
              			<span class="icon-bar"></span>
              			<span class="icon-bar"></span>
            			</button>
				</div><!--navbar-header-->
          			<?php get_search_form(); ?>									
				<div id="navbar" class="navbar-collapse collapse">
					<?php 
					if (has_nav_menu('main_navigation')) {
						
						$modality_default_menu = array(
    						'theme_location'  => 'main_navigation',
							'menu'       => 'main_navigation',
    						'depth'      => 0,
    						'container'  => false,
    						'menu_class' => 'nav navbar-nav',
                			'fallback_cb'       => 'wp_page_menu',
    						'walker'     => new wp_bootstrap_navwalker(),
						);
					
					} else {
						
						$modality_default_menu = array(
    						'theme_location'  => 'main_navigation',
							'menu'       => 'main_navigation',
    						'depth'      => 0,
    						'container'  => false,
    						'menu_class' => 'nav-bar',
                			'fallback_cb'       => 'wp_page_menu',
						);
						
					} 
					
					wp_nav_menu( $modality_default_menu );
					
					?>
					
          			</div><!--/.nav-collapse -->
        
      </nav>
			</div><!--header-wrap-->
		</div><!--header-holder-->

    Is this what you called the “root’?

    Thread Starter hmahraj

    (@hmahraj)

    The image can be viewed if you right click and open in a new tab.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add text to header’ is closed to new replies.