change header size

• 

  christelschat · Member · Mar 24, 2018 at 4:24 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I would really like to resize the header a bit smaller, so it will have the same size as the posts below.

  Another less urgent question: can I change the word “home” into a pictogram?

  Thanks in advance

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

• 

  slan988 · Member · Mar 24, 2018 at 6:53 pm

  • Copy link

  Hi,
  you can change word “home” into pictogram via CSS or use Plugin “Menu Icons by ThemeIsle”. And about the size of header, you can change too via CSS

• 

  timethief · Member · Mar 24, 2018 at 7:34 pm

  • Copy link

  @christelschat
  Staff will assist you as soon as possible. It’s a weekend so please be patient while waiting.

• 

  mouli · Staff · Mar 25, 2018 at 1:06 am

  • Copy link

  Hi
  If you meant the logo itself in the header, you can make this smaller as follows:

  .site-branding .custom-logo {
  	max-width: 100px;
  	height: auto;
  }

  Then you could reduce the top and bottom margins on the logo wrapper as follows:

  .site-branding {
  	margin: 0;
  }

  and then there is a bit of padding that you can play with as well with this:

  .header-main {
  	padding-top: 10px;
  	padding-bottom: 10px;
  }

  So there are a few ways to change the size of the header to hopefully achieve what I think it is you are after.
  All these bits of CSS need to go in Additional CSS in the customizer for which you will of course need a premium plan.

• 

  christelschat · Member · Mar 25, 2018 at 6:47 am

  • Copy link

  Thanks, for your answer but is was not quit what I meant. What I meant was to reduce the size at the left and right size from the header picture so it will have the same as the blogposts below.
  Or is there a way to have header picture above the menu instead of below the menu?
  Hope you can help me out again.
  Thanks in advance

• 

  christelschat · Member · Mar 25, 2018 at 2:35 pm

  • Copy link

  I solved the problem :-)

• 

  mouli · Staff · Mar 25, 2018 at 9:20 pm

  • Copy link

  Good to hear that you fixed it.
  Would you mind briefly explaining how you did it so we can all learn from it.

• 

  christelschat · Member · Mar 25, 2018 at 9:30 pm

  • Copy link

  I didn’t change the header-size but used a picture in the header using this

  .site-header {
  background: url(‘https://namewordpresssite.files.wordpress.com/namepicture.jpg’) !important;
  }

• 

  mouli · Staff · Mar 25, 2018 at 9:49 pm

  • Copy link

  That seems to work nicely too.
  Thanks for sharing it.