CSS Wordpress header help

I have an Image with 3 logo's which is in a widget in my header.  I want the image to stay to the right of the header, whichever screen size.  At the moment it keeps moving to the left and keeps moving when you reduce the size of the browser.  

I want it to stay to the right, above the menu, and then not show on mobile.

My website is here ---
Jon ImmsWeb DeveloperAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
The easiest way to do this is to move this code
<div id="text-3" class="extendedwopts-hide extendedwopts-tablet extendedwopts-mobile extendedwopts-md-right widget clearfix widget_text">
  <div class="textwidget">
    <p>
      <img class="alignright wp-image-14586" src="https://cheerful-spiders.flywheelsites.com/wp-content/uploads/2018/03/CreteShafferHunt_Reversed-300x48.png" alt="brand-logos" width="600" height="97">
    </p>
  </div>
</div>

Open in new window

A bit further down, inside the following
<div class="inner-container">

Open in new window

And then change this style
#text-3 {
/*  right: calc(379px + 0%); FROM THIS */
    right: 0; /* To this */
        ....
}

Open in new window

1
 
Martin MillerCTOCommented:
Hi,

I looked at your site and the theme used allow for responsive design, which means that shift and resizing, is part of the theme. To get around part of this you will need to modify the header php code and the how the CSS interact.  There are CSS overrides you can apply, without modifying the them code, but, I think the header php code will need to be customized to do what you are seeking.

Martin
0
 
Jon ImmsWeb DeveloperAuthor Commented:
Thanks Jullian,

I agree about getting the widget inside the inner-container.

I created a widget area
function smallenvelop_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Header Logos', 'smallenvelop' ),
        'id' => 'header-logos',
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<h1>',
        'after_title' => '</h1>',
    ) );
}
add_action( 'widgets_init', 'smallenvelop_widgets_init' );

Open in new window


I can see the inner-container in the template below, but not sure how i would add the widget area into that code?

<?php 
global $avia_config;

$responsive		= avia_get_option('responsive_active') != "disabled" ? "responsive" : "fixed_layout";
$headerS 		= avia_header_setting();
$social_args 	= array('outside'=>'ul', 'inside'=>'li', 'append' => '');
$icons 			= !empty($headerS['header_social']) ? avia_social_media_icons($social_args, false) : "";

if(isset($headerS['disabled'])) return;

?>

<header id='header' class='all_colors header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerS['header_class']; ?>' <?php avia_markup_helper(array('context' => 'header','post_type'=>'forum'));?>>

<?php

//subheader, only display when the user chooses a social header
if($headerS['header_topbar'] == true)
{
?>
		<div id='header_meta' class='container_wrap container_wrap_meta <?php echo avia_header_class_string(array('header_social', 'header_secondary_menu', 'header_phone_active'), 'av_'); ?>'>
		
			      <div class='container'>
			      <?php
			            /*
			            *	display the themes social media icons, defined in the wordpress backend
			            *   the avia_social_media_icons function is located in includes/helper-social-media-php
			            */
						$nav = "";
						
						//display icons
			            if(strpos( $headerS['header_social'], 'extra_header_active') !== false) echo $icons;
					
						//display navigation
						if(strpos( $headerS['header_secondary_menu'], 'extra_header_active') !== false )
						{
			            	//display the small submenu
			                $avia_theme_location = 'avia2';
			                $avia_menu_class = $avia_theme_location . '-menu';
			                $args = array(
			                    'theme_location'=>$avia_theme_location,
			                    'menu_id' =>$avia_menu_class,
			                    'container_class' =>$avia_menu_class,
			                    'fallback_cb' => '',
			                    'container'=>'',
			                    'echo' =>false
			                );
			                
			                $nav = wp_nav_menu($args);
						}
			                
						if(!empty($nav) || apply_filters('avf_execute_avia_meta_header', false))
						{
							echo "<nav class='sub_menu' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
							echo $nav;
		                    do_action('avia_meta_header'); // Hook that can be used for plugins and theme extensions (currently: the wpml language selector)
							echo '</nav>';
						}
						
						
						//phone/info text	
						$phone			= $headerS['header_phone_active'] != "" ? $headerS['phone'] : "";
						$phone_class 	= !empty($nav) ? "with_nav" : "";
						if($phone) 		{ echo "<div class='phone-info {$phone_class}'><span>".do_shortcode($phone)."</span></div>"; }
							
							
			        ?>
			      </div>
		</div>

<?php } 
	
	
	
	$output 	 = "";
	$temp_output = "";
	$icon_beside = "";
	
	if($headerS['header_social'] == 'icon_active_main' && empty($headerS['bottom_menu']))
	{
		$icon_beside = " av_menu_icon_beside"; 
	}
	
	
	
	
	
	
?>
		<div  id='header_main' class='container_wrap container_wrap_logo'>
	
        <?php
        /*
        * Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
        */
        do_action('ava_main_header');
        
        if($headerS['header_position'] != "header_top") do_action('ava_main_header_sidebar');
		
	
				 $output .= "<div class='container av-logo-container'>";
				 
					$output .= "<div class='inner-container'>";
					

						/*
						*	display the theme logo by checking if the default logo was overwritten in the backend.
						*   the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
						*/
						$addition = false;
						if( !empty($headerS['header_transparency']) && !empty($headerS['header_replacement_logo']) )
						{
							$addition = "<img src='".$headerS['header_replacement_logo']."' class='alternate' alt='' title='' />";
						}
						
						$output .= avia_logo(AVIA_BASE_URL.'images/layout/logo.png', $addition, 'span', true);
						
							if(!empty($headerS['bottom_menu']))
							{
								ob_start();
								do_action('ava_before_bottom_main_menu'); // todo: replace action with filter, might break user customizations
								$output .= ob_get_clean();
							}
							
						    if($headerS['header_social'] == 'icon_active_main' && !empty($headerS['bottom_menu']))
						    {
							    $output .= $icons;
						    }
						    
						/*
						*	display the main navigation menu
						*   modify the output in your wordpress admin backend at appearance->menus
						*/
						    
						    if($headerS['bottom_menu'])
						    { 
							    $output .= "</div>";  
								$output .= "</div>";
								
								if( !empty( $headerS['header_menu_above'] ))
								{
									$avia_config['temp_logo_container'] = "<div class='av-section-bottom-logo header_color'>".$output."</div>";
									$output = "";
								}
								
								$output .= "<div id='header_main_alternate' class='container_wrap'>";
								$output .= "<div class='container'>";
							}
						
						
						    $main_nav = "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
						        $avia_theme_location = 'avia';
						        $avia_menu_class = $avia_theme_location . '-menu';
						        $args = array(
						            'theme_location'	=> $avia_theme_location,
						            'menu_id' 			=> $avia_menu_class,
						            'menu_class'		=> 'menu av-main-nav',
						            'container_class'	=> $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
						            'fallback_cb' 		=> 'avia_fallback_menu',
						            'echo' 				=>	false, 
						            'walker' 			=> new avia_responsive_mega_menu()
						        );
						
						        $wp_main_nav = wp_nav_menu($args);
						        $main_nav .= $wp_main_nav;
						        
						      
						    /*
						    * Hook that can be used for plugins and theme extensions
						    */
						    ob_start();
						    do_action('ava_inside_main_menu'); // todo: replace action with filter, might break user customizations
						    $main_nav .= ob_get_clean();
						    
						    if($icon_beside)
						    {
							    $main_nav .= $icons; 
						    }
						        
						    $main_nav .= '</nav>';
							
							/**
							 * Allow to modify or remove main menu for special pages
							 * 
							 * @since 4.1.3
							 */
							$output .= apply_filters( 'avf_main_menu_nav', $main_nav );
						
						    /*
						    * Hook that can be used for plugins and theme extensions
						    */
						    ob_start();
						    do_action('ava_after_main_menu'); // todo: replace action with filter, might break user customizations
							$output .= ob_get_clean();
				
					 /* inner-container */
			        $output .= "</div>";
						
		        /* end container */
		        $output .= " </div> ";
		   		
		   		
		   		//output the whole menu     
		        echo $output; 
		        
		        
		   ?>

		<!-- end container_wrap-->
		</div>
		
		<div class='header_bg'></div>

<!-- end header -->
</header>

Open in new window

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.

All Courses

From novice to tech pro — start learning today.