customising alves header

• 

  inezaponte · Member · Jan 10, 2021 at 6:40 pm

  • Copy link
  • Add topic to favorites

  I would like to change the Alves header in the following way:

  1) Reduce the padding below the title/menu line
  2) Place the logo to the left of the site title (it now sits above the site title which is why I don’t use it)
  3) Make the header sticky
  4) Change the font colour

  Thanks for your help,
  Inez

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

• 

  inezaponte · Member · Jan 10, 2021 at 6:45 pm

  • Copy link

  Just to say that I am looking for the css code that will allow me to do that

• 

  fstat · Staff · Jan 11, 2021 at 8:22 am

  • Copy link

  Hi there,

  1) Reduce the padding below the title/menu line

  That cannot be done because that whole space is occupied by the social media icons.

  2) Place the logo to the left of the site title (it now sits above the site title which is why I don’t use it)

  This might be possible, but it depends on the logo size. Also, all of them (logo and menu) might not fit in a single line.

  3) Make the header sticky

  This might require a modification of the theme which is not possible with CSS. I’m doing some testing to see if it’s possible.

  4) Change the font colour

  What font exactly?

• 

  inezaponte · Member · Jan 11, 2021 at 8:51 am

  • Copy link

  Thanks fstat.

  I can reduce the logo size so that it fits, but don’t know how to write the code for that.

  The font is Raleway.

  If you could find a way to make the header sticky that would be fab.

  And if you could tell me how to change the background colour to the footer that would help too.

  Many thanks,
  Inez

• 

  fstat · Staff · Jan 11, 2021 at 9:09 am

  • Copy link

  Please insert the logo at your preferred size and I’ll work out the CSS :)

• 

  fstat · Staff · Jan 11, 2021 at 12:27 pm

  • Copy link

  To make the header stick to the top use this code:

  /* Alves header sticky (KK) */
  #page #masthead {
      position: fixed;
      background: #fff;
      width: 100%;
      z-index: 10;
      padding: 32px;
  }
  #page #content {
      padding-top: 124px;
  }
  @media only screen and (max-width: 559px) {
      #page #content {
          padding-top: 189px;
      }
  }

  For the footer’s background color, use this one:

  /* Footer background color (KK) */
  #colophon {
      background: #eee;
  }

  The font is Raleway.

  We need to know where exactly is that on your site. The title? The body? elsewhere?

  Also, insert your logo, so that we can figure out the code needed to move it.

• 

  inezaponte · Member · Jan 11, 2021 at 12:32 pm

  • Copy link

  Thanks you. That works perfectly!

  I have now added the logo as a guide (need to get higher res, but that’s the size)

• 

  inezaponte · Member · Jan 11, 2021 at 1:12 pm

  • Copy link

  Also, is there a way to stop the sticky header on mobile. It tends to use up too much of the screen otherwise

• 

  staff-mckluskey · Staff · Jan 11, 2021 at 2:23 pm

  • Copy link

  Okay so, to move your logo, please add this code:

  
  /* Move logo next to title (KK) */
  @media screen and (min-width: 560px) {  
      .site-header {
          grid-template-areas: 
              "site-logo site-title main-navigation"
              "site-logo site-title social-navigation";
          grid-template-columns: 150px 1fr 2fr;
      }
      .site-header .site-title,   
      .site-header .main-navigation {
          align-self: center;
      }
      .site-header .site-logo {
          margin-bottom: 0;
      }
  }

  From the previous code, you’ll need to remove this piece:

  @media only screen and (max-width: 559px) {
      #page #content {
          padding-top: 189px;
      }
  }

  And then, add this other code block to the media query as well:

  /* Alves header sticky (KK) */
  @media screen and (min-width: 560px) {  
  #page #masthead {
      position: fixed;
      background: #fff;
      width: 100%;
      z-index: 10;
      padding: 32px;
  }
  }

  I hope that helps :).

• 

  inezaponte · Member · Jan 11, 2021 at 3:00 pm

  • Copy link

  Hi fresatomica,

  The code to disable sticky header on mobile is perfect – thanks! – but the code to move the logo has squeezed everything to the left and kept the logo on top. You can see what I mean here: https://growinggoodlives.wordpress.com/

  Inez

• 

  staff-blorbo · Staff · Jan 12, 2021 at 4:11 pm

  • Copy link

  Hm, would you please elaborate on what you’d like it to do instead?

• 

  inezaponte · Member · Jan 12, 2021 at 4:17 pm

  • Copy link

  Hi Macmanx,

  I sorted it now. I had to delete the earlier suggestions and follow the css fresatomic provided.

  One last thing: how would I add a drop shadow to the sticky header?

  Thanks,
  Inez

• 

  staff-blorbo · Staff · Jan 12, 2021 at 5:31 pm

  • Copy link

  Try this:

  /* Sticky header shadow (KK) */
  #masthead {
      box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.1);
  }

• 

  inezaponte · Member · Jan 12, 2021 at 5:39 pm

  • Copy link

  Yes! Fantastic! Thanks so much. :-)

• 

  inezaponte · Member · Jan 12, 2021 at 5:57 pm

  • Copy link

  Okay, sorry to keep asking more questions, but how can I centre the header on mobile?

• 

  staff-blorbo · Staff · Jan 12, 2021 at 6:31 pm

  • Copy link

  This should work for you:

  /* Justify header elements on mobile (KK) */
  @media only screen and (max-width: 559px) {
      #page #masthead {
          text-align: center;
      }
      .main-navigation>div>ul li {
          text-align: center;
      }
      .main-navigation>div>ul li a {
          margin: 10px 0;
      }
     .social-navigation>div>ul {
         justify-content: center;
     }
  }

  We generally don’t provide this level of customization support, you can see our CSS scope of support here: https://wordpress.com/support/custom-design/css-support/

  If you need more customizations for your site, then you can hire a designer/developer who can help you out.

• 

  inezaponte · Member · Jan 12, 2021 at 6:41 pm

  • Copy link

  That’s all. Thanks!