adjusting my header image and hiding the page title for the home page

• 

  gtouger · Member · Nov 8, 2015 at 10:13 pm

  • Copy link
  • Add topic to favorites

  Hello. My site is carolinalactationconsultant.com and I am using the Gateway theme.

  As a novice, I have several questions but will just ask two for now:
  My header image looks great on some screens and devices, but at the home page on desk top the image is stretched, so that the full image (from top to bottom) is not seen. Can I adjust that?

  Second question is how can I hide the title ‘home’ on the home page?

  Thank you!

  gale

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

• 

  nizamilputra · Member · Nov 9, 2015 at 8:28 am

  • Copy link

  Hi there,

  I suggest you to adjust the header height not image size. Because when you make the image smaller the image will not fill the screen fully.
  You can try to use this css to adjust the header height;

  @media screen and (min-width: 50em){
    .header-bg{
       min-height: 500px;
    }
    .site-branding{
    padding: 9em 1.5em;
    }
  }

  Second question is how can I hide the title ‘home’ on the home page?

  Here the css;

  .home .page-title{
    display: none;
  }

• 

  gtouger · Member · Nov 9, 2015 at 6:50 pm

  • Copy link

  Thanks for the help. Removing ‘home’ is all set.

  The header image looks better but I was hoping to have the image stop about the bottom of the mom’s hand. Can you tell me which number in the css controls that so that I may experiment?

  It seems the css we added changed more than just the photo:

  Before you helped me fix the photo the photo and menu moved together so that they were out of view as the reader scrolls down. Now the menu stays in view. I would prefer leaving the menu an photo scrolling out of view together as before.

  There is now a brown band of color between the image and the menu which I don’t recall being there before. Can we remove that?

• 

  nizamilputra · Member · Nov 10, 2015 at 2:57 am

  • Copy link

  You can adjust the height of header by setting min-height property of .header-bg. And we can remove the brown background by re-setting background-size: cover. And here is the complete code:

  @media screen and (min-width: 50em){
    .header-bg{
       min-height: 500px; // you can adjust the height from here
       background-size: cover;
    }
    .site-branding{
       padding: 9em 1.5em; // you can adjust the position of the header text
    }
  }

• 

  gtouger · Member · Nov 10, 2015 at 3:55 am

  • Copy link

  sorry – Not sure I understand. Do I substitute a number for the words ‘you can adjust …..?

• 

  nizamilputra · Member · Nov 10, 2015 at 3:58 am

  • Copy link

  Subtitute 500px with other number, eg: 450px, 300px, etc.
  Please ignore text after “//”, it just for comment, so the text doesn’t work in the css after I put “//” before it.

• 

  gtouger · Member · Nov 10, 2015 at 2:47 pm

  • Copy link

  OK. That worked. I now understand that the appearance of the image changes according to the screen size, rather than the image becoming proportionately larger or smaller. Also, the band of brown below the image widens and disappears as the window size changes.

  Now, can we please address the other concern about the header image: Before you helped me fix the photo, the photo and menu moved together so that they were out of view as the reader scrolls down. Now the menu stays in view, covering the image as it rolls up. I would prefer leaving the image and menu scrolling out of view together as before.

  Is that a setting I can adjust or is css needed?
  Thanks!

• 

  thesacredpath · Member · Nov 10, 2015 at 11:27 pm

  • Copy link

  @gtouger, add the following to the bottom of your custom CSS to make the menu scroll out with the image.

  .sticking {
      position: inherit;
  }

• 

  nizamilputra · Member · Nov 11, 2015 at 2:45 am

  • Copy link

  Maybe you can also try this:

  .header-bg {
      background-attachment: scroll;
  }

• 

  gtouger · Member · Nov 11, 2015 at 2:58 am

  • Copy link

  the sacred path: that did not seem to work but, nizamil your suggestion did the trick. Thanks to you both.

• 

  nizamilputra · Member · Nov 11, 2015 at 3:01 am

  • Copy link

  Glad that worked! You are welcome.

• 

  thesacredpath · Member · Nov 11, 2015 at 6:42 am

  • Copy link

  @nizamilputra, to the rescue. Nice job!

• 

  nizamilputra · Member · Nov 11, 2015 at 6:49 am

  • Copy link

  @thesacredpath, Thank you :)