Vertically Shrink the Header

I find that the Header at the top of the site takes up too much vertical space. How do I shrink that? Is that something that is done with Beans, or is it just done with CSS? [EDIT: I should add that I am using Beans with the Beans Child Theme]

I'm new to both wordpress and Beans (web-wise, I've been under a rock since the 1990's). Beans seemed like a logical choice for tailoring wordpress to my plans, but I have a lot of learning to do.


Hey David, welcome to WP and Beans community.

You will see if you inspect the header that there is a uk-block class (more info about UIkit block). So here you have 3 options:

  1. Change the entire feel to your site by reducing all uk-block via CSS or by setting @block-padding-vertical: 5px; LESS variable in your child theme style.less
  2. Only reduce the header padding via CSS.
  3. Use Beans HTML API to remove the uk-block class from your child theme functions.php as per the code snippet below.
beans_remove_attribute( 'beans_header', 'class', 'uk-block' );

Hope that helps, please don't hesitate to ask if you have any other questions.

PS: If you don't understand 100%, don't sweat it, it will come over time and the community and I are here to help 🙂

I removed those uk-blocks with the API and now I have a nice, slim top menu and title.


Write a reply

Login or register to write a reply, it's free!