Need help changing the header picture

• 

  gloriaforus · Member · Nov 21, 2015 at 8:40 pm

  • Copy link
  • Add topic to favorites

  I need to change the header picture in this page ONLY http://diversesolutionsgrp.com/category/diverse-travel-solutions/ To this picture. http://www.dsgtravelagency.com/website_banners/bannerClicked/1888

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

• 

  toniaslimm · Member · Nov 21, 2015 at 9:13 pm

  • Copy link

  Dear gloriaforus

  Have you followed the instructions on the following link:

  Upload a Header Image

• 

  gloriaforus · Member · Nov 21, 2015 at 9:40 pm

  • Copy link

  Yes I did, but I was told I had to use css for that. I have tried but need help with it. I only want to change it in that particular page, not the whole site.

• 

  toniaslimm · Member · Nov 21, 2015 at 9:41 pm

  • Copy link

  gloriaforus,

  I have tagged this with “modlook” so a staff member can help you with this.

• 

  gloriaforus · Member · Nov 21, 2015 at 9:45 pm

  • Copy link

  Thanks.

• 

  toniaslimm · Member · Nov 21, 2015 at 9:45 pm

  • Copy link

  You are welcome. I hope you are able to work it all out.

• 

  chrisrudzki · Member · Nov 23, 2015 at 12:24 am

  • Copy link

  @gloriaforus:

  This CSS should be what you’re looking for:

  .category-diverse-travel-solutions #header-image a img {
      display: none;
  }
  
  .category-diverse-travel-solutions #header-image a {
      background-image: url('http://your_website/header_image.png');
  	background-repeat: no-repeat;
  }

  Replace http://your_website/header_image.png with the URL to the header image you want to show on that particular category page.

• 

  gloriaforus · Member · Nov 23, 2015 at 12:41 am

  • Copy link

  Thanks, I tried it, but it did not remove the picture.. I its just behind it. I guess i need the css code to remove the picture on top of the background first

• 

  gloriaforus · Member · Nov 23, 2015 at 12:56 am

  • Copy link

  This is the link to the picture I want to have there https://diversesolutionsgrp.files.wordpress.com/2015/11/1888_banner-e1448239325489.jpg

• 

  chrisrudzki · Member · Nov 23, 2015 at 3:43 pm

  • Copy link

  @gloriaforus:

  A couple of the rules in your CSS were incorrect. Can you remove the rules related to category-diverse-travel-solutions in your CSS, and just add these?

  .category-diverse-travel-solutions #header-image a img {
  	display: none;
  }
  
  .category-diverse-travel-solutions #header-image a {
  	background-image: url('https://diversesolutionsgrp.files.wordpress.com/2015/11/1888_banner-e1448239325489.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  width: 100%;
  height: 300px;
  display: block;
  }

• 

  gloriaforus · Member · Nov 23, 2015 at 5:23 pm

  • Copy link

  Thanks it worked!! Now, I need the picture to be linked to http://www.DSGtravelAgency.com, that way when people click on it, it takes them to that site instead of my webpage home page.

  The menu I want to show on that page is the secondary menu, that the primary.

  Can all of that be done? or is there an easier way?

  Thanks.

• 

  thesacredpath · Member · Nov 24, 2015 at 3:00 am

  • Copy link

  Hi, the image you linked to above, and the image in your custom CSS is reporting file not found, so you may want to check that URL. There isn’t a way with CSS to change the link on an image.

• 

  thesacredpath · Member · Nov 24, 2015 at 3:08 am

  • Copy link

  The secondary menu shows in the footer. There really isn’t a way to show it at the top where the Primary Menu is. The Primary menu can be hidden from certain pages if you wish to do that, but the secondary menu would be in the footer.

  Have you thought about putting the secondary menu stuff in a Custom Menu Widget in the sidebar? With the Custom Menu Widget, you can use Widget Visibility to hide the menu from all but the pages you wish it to show on.

• 

  gloriaforus · Member · Nov 24, 2015 at 4:13 am

  • Copy link

  Thanks for the info. Can you help me with the code to hide the main menu and create the widget on the side?

• 

  thesacredpath · Member · Nov 26, 2015 at 1:02 am

  • Copy link

  To hide the primary menu from all pages, add the following CSS.

  .site-header {
      display: none;
  }

  For the menu you are going to put into the sidebar, you create a custom menu just like you did with the top menu, but do not assign it to the primary or secondary menu locations. Save it and then add the menu widget to the sidebar and select the menu from the dropdown in the widget.