Header Item Moving when zooming

  • Im pretty sure its an error in my css, im pretty new to this. Ive been scouring around trying to implement things others said worked for them. So, sorry about the dog mess that is this code:P but ima post the header stylesheet here to see if you guys can spot the problem. Thank you so much:))!

    <?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>
</br>
</br>
	<center><?php if ( get_header_image() ) : ?>
		<div style="display:inline; position: relative; overflow: hidden; float:none; z-index: 100;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a> </div>
		<?php endif; ?></center> <a href="https://www.susaneisen.com/catalog/books/373480/" target="_blank"> <div style="float: right; position:absolute; display:inline; z-index: 100; overflow:hidden; top: 80px; right: 170px;" width="170px"> <img src="https://crazyaboutart.com/wp-content/uploads/2016/11/order-now-button.png" height="44px" width="111px"> </div> </a>
		<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		
	</header><!-- #masthead -->

	<div id="main" class="wrapper">
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter salonethree

    (@salonethree)

    <center><?php if ( get_header_image() ) : ?>
		<div style="display:inline; position: relative; overflow: hidden; float:none; z-index: 100;"><a>"><img />" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a> </div>
		<?php endif; ?></center> <a href="https://www.susaneisen.com/catalog/books/373480/" target="_blank"> <div style="float: right; position:absolute; display:inline; z-index: 100; overflow:hidden; top: 80px; right: 170px;" width="170px"> <img src="https://crazyaboutart.com/wp-content/uploads/2016/11/order-now-button.png" height="44px" width="111px" /> </div> </a>

    layout or formatting problems can rarely be solved by looking at the html or php code only.
    mostly, it is a problem with the CSS in connection with the html.

    generally, a live link to the site is needed, where the problem can be investigated.

    please post a link to your site.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header Item Moving when zooming’ is closed to new replies.