White Space Under Main Menu After Adding Logo

Hello,

The white space under the menu is due to the logo dimensions. In order to reduce the space allocated to the menu, you will need to reduce the height of the space allocated to the logo.

At the moment, your theme sets a maximum width of 380px and the logo height in pixels is calculated automatically, in proportion of the original image.

If you want to reduce that, you will need to go to Customize > Addicional CSS and add this code:

`#masthead .custom-logo {
max-width: 150px;
}`

Where the number 150 is just an example of a value you could try.

Please notice though that the logo will be smaller as a consequence, so you may have to compromise how much space you remove from below the menu.

Hi Carme!

Thank you for your reply! I completely understand. Is there a way for me to instead increase the main menu font and maybe center it in the middle of the white space?

Thank you!
Britt

Hello Britt,

I’ve seen that you’ve decided to remove the logo, in the end… In case you wish to explore the option above, here are the instructions.

Yes, you could do so by adding some padding at the top of the menu list with this code:

`.header-left-col .main-navigation ul:not(.sub-menu):not(.children) {
padding-top: 30px;
}`

(where 30 is just an example number)

and to increase the size of the font you would add:

`.main-navigation ul:not(.sub-menu):not(.children) > li {
font-size: 1rem;
}`

Where 1 is an example number. The current setting is 0.8125rem

rem is a relative unit meaning take whatever is the default size for the whole document and multiply it by this number. So the menu font size is currently 0.8125 times smaller than the default font size.

After this, you’d need to check that the menu still looks good in smaller screens. And, if necessary, add extra changes to make sure it does. All websites must now be able to adapt to mobile, tablet and wide screens, and the size and position of all elements normally vary depending on the size of the screen…

If you wish to learn how to make small styling changes to your website, here’s a Google mini-workshop that explains it quite well: https://developers.google.com/web/tools/chrome-devtools/css/

Side note: Moved to Fixing WordPress and don’t put the link in the post, use the link field.

You come across as spamming when you do that.

*Looks*

For pro or commercial product support please contact the author directly on their site. This includes any pre-sales topics as well.

https://themesharbor.com/contacts/

As the author is aware, commercial products are not supported in these forums. I am sure they will have no problem supporting you there.