Header Photo

• 

  afinocchiarophoto · Member · Feb 21, 2017 at 7:40 am

  • Copy link
  • Add topic to favorites

  Hi, I am toying with the idea of using a header photo on my website.

  1. How can I get the header photo to be background for main menu? I would like the image to extend below menu.

  2. Can I remove the line that is under main menu if I use header photo?

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

• 

  thesacredpath · Member · Feb 21, 2017 at 9:08 pm

  • Copy link

  Hi, add the following to your custom CSS and see what you think. What I’ve done is to add an image via CSS to the #masthead div and set the background color of the title and navigation divs to a translucent white. If we set that color to fully transparent, your site title and menu items sort of get lost in the image. I looked at your media library and just grabbed an image that appeared to be one that was meant as a header.

  #masthead {
  	background-image: url('https://annafinocchiarophotography.files.wordpress.com/2015/03/cropped-16487827_162144454287933_4735633314505833614_o.png');
  	display: block;
  	background-size: cover;
  }
  .site-branding, .main-navigation {
  	background-color: rgba(255, 255, 255, 0.4);
  }
  .main-navigation {
  	border-bottom: none;
  }

• 

  afinocchiarophoto · Member · Feb 22, 2017 at 6:39 am

  • Copy link

  Perfect as always, thank you!

  So I have a scrolling question. As of now, when I scroll down, the header/menu scrolls and eventually disappears. is there a way to keep the header/menu from moving so that it is always visible when scrolling?

• 

  thesacredpath · Member · Feb 22, 2017 at 8:34 pm

  • Copy link

  Super!

  On the fixed header, we can do that, but to make sure that on smaller screens/windows, there is ample room for the content, I’ve used a Media Query to limit this to screens 600px and wider.

  @media screen and (min-width: 600px) {
  #page {
  	position: relative;
  }
  #masthead {
  	position: fixed;
  	background-color: #fff;
  	width: 100%;
  	max-width: 1180px;
  	z-index: 1;
  }
  .site-branding, .main-navigation {
  	background-color: transparent;
  }
  #content {
  	margin-top: 200px
  }
  }

• 

  afinocchiarophoto · Member · Feb 22, 2017 at 9:32 pm

  • Copy link

  Ah, thank you. I applied this and the post and page titles appear in the menu as i scroll. Can I hide them when they reach the menu?

• 

  thesacredpath · Member · Feb 22, 2017 at 10:09 pm

  • Copy link

  Ah, weird that doesn’t happen on the main page. In the #masthead rule, change the z-index to 10.

• 

  afinocchiarophoto · Member · Feb 25, 2017 at 1:35 am

  • Copy link

  @thesacredpath, the following CSS requests were answered on a different thread but the information given didn’t work for me . Can you take a look at them?

  Can I remove the following lines?
  1. on front page, line before widgets
  2. on “giving back” page, line before grid photos
  3. Top of footer widgets

  How do I remove the dots in the main menu?

• 

  thesacredpath · Member · Feb 25, 2017 at 2:52 am

  • Copy link

  I’ve replied to all those in the other threads. If I missed any, let me know.