Header too thick once aligned to center

Hello, We are working on this website: https://demo.bahaitr.org/hzabdulbaha/

We wanted to put a logo on top and aligned our menu to center, and it became too big. No matter what I do it doesn’t change. I tried to reduce the size of the logo, but it doesn’t work. How can I make it more compact and thinner? Because at the moment it blocks almost all half of the page. Thank you

Hello,

First thanks for using our Sydney theme!

Probably the best way is reduce the logo size and the menu items font-size too. For it please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

/* Change logo size */
.site-logo {
	width: 150px;
    height: auto !important;
    margin-bottom: 0 !important;
}

/* Reduce menu items font size */
@media screen and (min-width: 992px) {
	#mainnav ul li a {
		font-size: 16px !important;
	}
}

We hope this helps!

Let us know if you need further assistance.

Kind Regards,
Rodrigo,
aThemes Support

This works, but still the space between the logo and the menu items is too much, so there is still quite a lot of amount that could be reduced. It helped the logo size to be smaller, but I still cannot control the header thickness. I tried to change margin bottom to -10 or so, doesn’t work.

Hello,

Great! We are almost there!

I saw you did a try changing the margin-top value to negative. This is a good idea, but probably with less value. Also, you should add the “px” unit.

Change this:
image

To this:

.site-logo {
	width: 155px;
    height: auto !important;
    margin-bottom: -17px !important;
    padding-top: 5px !important;
}

Note I’ve added a padding-top too. This will reduce the header height even more.

We hope this helps!

Kind Regards,

Rodrigo,

aThemes Support

1 Like

Thanks, Rodrigo. This worked!

1 Like