I have uploaded a full size header as a background using your previous suggestion and by looking around in the forum. The header fits in the space and I was able to change the menu to span the full width of the container and to make it so the logo does not display using your code. I made my header 1200 x 200 and it looks great on Chrome and I tried it on Internet Explorer and it looks fine. Here's the code I put in the Custom CSS. .logo { display: none; } .header { background: url('http://www.bestbabymonitorchoice.com/wp-content/uploads/2015/04/5Best-Baby-Monitors.png') top center no-repeat; } .menu_wrapper { margin: 0 !important; } Difficulty 1) Header Ad still appears in the header image. I want to remove the Amazon Ad from the Header Image. 2) When the site is viewed on A Mobile Phone it only shows the logo and not the header for the site. The site is located at http://www.bestbabymonitorchoice.com I notice there is about 9 pages when I tried to find out about header and replacing and logo and header ad. Maybe it could be an option next time rather than the logo and ad being hard coded. Can you help?
I also tried several of the codes here - don't want to spend too much time on it as I have been 2 days on it myself and also waiting for responses. Tried removing by putting a space in ad space in header - cut off header. Tried responsive media code - didn't work. I must be doing something wrong but want some code that works to replace the header logo with a full header and option to use the header ad space in future but for right now would be happy if it is gone. (If it would not be too much to ask could you please show me how I can make the ad usable in the future with the header I have there now.(The header disappears if I remove the ad now).
ps This guys site looks good and might be what I want but he used logo/header image? what did he do that I am not. http://headphonesforworkingout.com/
Hello, Please paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard. Code: .header { padding-top: 172px !important; background-size: contain !important; } .header .header_info { display: none !important; } @media only screen and (max-width: 767px) and (min-width: 480px){ .header { padding-top: 65px !important; } } @media only screen and (max-width: 480px){ .header { padding-top: 40px !important; } } @media only screen and (max-width: 960px) and (min-width: 767px){ .header { padding-top: 102px !important; } } @media only screen and (max-width: 140px) and (min-width: 961px){ .header { padding-top: 134px !important; } } Hope it will resolve your issue. Thanks, Praveen
That totally worked for removing the ad and for viewing on a mobile device. I do have another question which is if I wanted to use a logo of a large size like a header image and to keep the header ad would I use the same code or how could this be done? and would I use the same code as above?
Hello, It requires a separate customization in "header.php" file of the theme. Please replace the whole code of header.php of your theme with the code given below. PHP: <?php/*** The Header for our theme.** Displays all of the <head> section and everything up till <div id="main">**/?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]"><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo('charset'); ?>" /><title><?php/** Print the <title> tag based on what is being viewed.*/global $page, $paged;wp_title('|', true, 'right');// Add the blog name.bloginfo('name');// Add the blog description for the home/front page.$site_description = get_bloginfo('description', 'display');if ($site_description && ( is_home() || is_front_page() ))echo " | $site_description";// Add a page number if necessary:if ($paged >= 2 || $page >= 2)echo ' | ' . sprintf(__('Page %s', 'rethink'), max($paged, $page));?></title><?php if (is_front_page()) { ?><?php if (get_option('inkthemes_keyword') != '') { ?><meta name="keywords" content="<?php echo get_option('inkthemes_keyword'); ?>" /><?php } else { } ?><?php if (get_option('inkthemes_description') != '') { ?><meta name="description" content="<?php echo get_option('inkthemes_description'); ?>" /><?php } else { } ?><?php if (get_option('inkthemes_author') != '') { ?><meta name="author" content="<?php echo get_option('inkthemes_author'); ?>" /><?php } else { } ?><?php } ?><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><link rel="profile" href="[URL]http://gmpg.org/xfn/11[/URL]" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> <?php/* We add some JavaScript to pages with the comment form* to support sites with threaded comments (when in use).*/if (is_singular() && get_option('thread_comments'))wp_enqueue_script('comment-reply');/* Always have wp_head() just before the closing </head>* tag of your theme, or you will break many plugins, which* generally use this hook to add elements to <head> such* as styles, scripts, and meta tags.*/wp_head();?><!--[if gte IE 9]><script type="text/javascript">Cufon.set('engine', 'canvas');</script><![endif]--></head><body <?php body_class(); ?> style="<?php if (get_option('inkthemes_bodybg') != '') { ?>background:url(<?php echo get_option('inkthemes_bodybg'); ?>);<?php } else {?>background:url(<?php echo get_template_directory_uri() ?>/images/60degree_gray.png);<?php } ?>" ><div id="spinner"></div><div class="main-container"><div class="container_24"><div class="grid_24"><div class="main-content"><div class="header"><div class="grid_24 alpha"><div class="header_info"><?php if (get_option('inkthemes_topright') != '') { ?><p><?php echo get_option('inkthemes_topright'); ?></p><?php } else { ?><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/banner.png" alt="logo"/></a><?php } ?></div><div class="logo"><a href="<?php echo home_url(); ?>"><img src="<?php if (get_option('inkthemes_logo') != '') { ?><?php echo get_option('inkthemes_logo'); ?><?php } else { ?><?php echo get_template_directory_uri(); ?>/images/logo.png<?php } ?>" alt="<?php bloginfo('name'); ?>" /></a> </div> <div class="google_adsense"></div></div><!--Start Menu wrapper--><!--End Menu wrapper--></div><div class="clear"></div><div class="menu_wrapper"><div id="MainNav"><a href="#" class="mobile_nav closed">Pages Navigation Menu<span></span></a><?php inkthemes_nav(); ?></div></div><div class="clear"></div> Now, paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard. Code: .header { position: relative; padding:0; } .header .logo { margin: 0; } .header .logo img { margin: 0; } .header .header_info { position: absolute; top: 125px; right: 20px; } .menu_wrapper { margin: 0; } @media only screen and (max-width: 960px) and (min-width: 767px){ .header .logo img { width: 101%; } } @media only screen and (max-width: 767px) and (min-width: 480px){ .header .logo img { width: 200px; width: 100%; } .header_info a img { width: 250px; } .header .header_info { top: 60px; right: 0; } } @media only screen and (max-width: 480px){ .header .logo img { width: 103%; margin: 0; } .header_info a img { width: 100%; } } Thanks, Praveen
This is not working for me Maybe I need to start over to tell you what I want. This is all I want: 1) A logo to span the content area of the site - height I want to be able to do myself - for instance a logo 1440 x 200 or whatever. I don't know what you have for a maximum size - I want to it to be able to expand to the whole container or just to the content area or just a regular logo size or a bit bigger (depending what site I am working on) 2) Space above and below the logo - not alot but whatever I would like - sometimes I will want it - sometimes not 3) Keep the banner ad if I want Right now there is no flexibility. Forget everything I said about a header
Can you tell me how to modify the calendar widget? Colors are not in keeping with site. It is an odd size?
Is it possible to have the header with white space above and below with the CSS Code? I used your code however had to fiddle with the header to make the header the same width as the menu by altering top to this and this made the header expand to the width of the menu: .header { position: relative; padding:12px; } I also took the code out that I had put in that made the menu span the width of the container(it looked funny like that). and the header itself would not change with the header
I would like the header to look like this - in picture attached - but I don't know if that is how the header code you gave me is set up? Notice the outline on my picture - if I did outline the header would it show exactly like that? Anyway I want the white space above and below the header? Let me know.
I was able to accomplish the above image with my header but I had to put the white space into the header itself. Is there a way that this can be accomplished without diminishing the size of the header and just making the white space part of the code?
Hello, Please send us your website WordPress login details at [email protected] along with the thread link. Also, provide us the link of background image. Thanks, Praveen
