change header by clicking on menu

• 

  prestigeevent · Member · Aug 15, 2013 at 5:06 pm

  • Copy link
  • Add topic to favorites

  i want the header to be changed when clicking on a certain menu category. is that possible, if yes, how?

  The blog I need help with is: (visible only to logged in users)

• 

  rachelmcr · Member · Aug 16, 2013 at 9:38 am

  • Copy link

  Hi there,

  The Nishita theme that you are using supports a Custom Header Image, but that header will be the same on all pages on your site.

  Some themes support featured header images, which allow you to change the header image for specific pages, but Nishita does not support this. You can view the themes that support this feature here: http://theme.wordpress.com/themes/features/featured-image-header/

  You can also control the header image on each page by using Custom CSS, which is part of the Custom Design upgrade.

  Please let me know if you have any questions about that!

• 

  prestigeevent · Member · Aug 18, 2013 at 1:00 pm

  • Copy link

  hello,
  thank you for your help so far!
  I decided to go for the Custom Design upgrade. Unfortunately this is new to me and I am kind of lost. I have found this and inserted it in my CSS:

  #masthead {
  	position: relative;
  	top: 0;
  	background: url('images/masthead.jpg');
  	width: 1024px;
  	height: 295px;
  	margin: 0;
  	margin-top: 0;
  }
  
  #masthead {
  	position: relative;
  	top: 0;
  	background: url('http://prestigeevent.files.wordpress.com/2013/07/header-mit-schrift.jpg');
  	width: 1024px;
  	height: 295px;
  	margin: 0;
  	margin-top: 0;
  }

  What do I need to write that the header will change by clicking on the menu point “Kleines Magisches Variete” on my page and its subitems? The main header should remain on all other pages.

• 

  rachelmcr · Member · Aug 19, 2013 at 10:16 am

  • Copy link

  Hi there,

  The CSS code is different depending on your site’s theme. The code you found won’t actually work with the Nishita theme, but I can help you get started to find the right code to use.

  We have some information to help you get started with CSS here:

  • CSS Basics
  • Editing CSS

  If you wanted to change the header on all of the pages on your site, you could use this code:

  #header-image {
  	background: black url('YOUR_IMAGE_URL_HERE') no-repeat;
  	height: 295px;
  }
  
  #header img {
  	display: none;
  }

  You can upload your new header image to your media library and enter the image URL where it says YOUR_IMAGE_URL_HERE above.

  To change the header image only on specific pages, rather than your entire site, you will need to identify the page within the CSS code. Each page on your site has a page id that you can use for this purpose. We have instructions for finding the page ID here: http://en.support.wordpress.com/pages/#how-to-find-the-page-id

  For example, your page “Kleines Magisches Variete” has the page ID 383. To change the header image only on that page, you would use this code:

  .page-id-383 #header-image {
  	background: black url('YOUR_IMAGE_URL_HERE') no-repeat;
  	height: 295px;
  }
  
  .page-id-383 #header img {
  	display: none;
  }

  You will need to find the page ID for each page you want to change, so you can add it to your CSS code. If you need additional help with this, most of our CSS help is done by staff and volunteers in the CSS customization forum here:
  https://en.forums.wordpress.com/forum/css-customization

• 

  prestigeevent · Member · Aug 20, 2013 at 4:28 pm

  • Copy link

  Thank you very much. This has been very helpful!!! :)