How to adjust header logo size


I used the Child Theme: Child Theme: to center my logo and put the menu bar under the logo.

However, now my logo is squished! Can you help me fix this?

My website is:

HI there

in the style.css of child theme file, at the bottom change your css to this:

/Logo size/

.logo {
height: 100px;
max-height: 100%;
width: auto;

at this moment you have set width to 400px and that’s the reason why your logo is stretched

Hi Noda,

Thank you for all your help :slight_smile:

I was wondering is it possible to have an image as the background for the header?



Please add this Custom CSS in Appearance -> Customize -> Additional CSS,

#site-navigation {
    background: url('');

Change the image URL according to your own needs.

Let us know,


Hi Laranz,

Thank you so much that worked.

However the picture is too big (as you can see if you go on the website).

How can I resize it so that the picture fits in the background so you can see the full image?


Hi Homar,

You can try and use an image that is similar in size \ aspect ratio with the area its going to cover.
The current image is a bit of a box while the area it covers is more of a very narrow strip at the top.

In short try to use an image that is more like a stripe, long and short.
Then use this CSS to try and make the whole image viewable:

    background-size:cover !important;
    background-repeat:no-repeat !important;

Hope this helps.

Also is it possible to make the menu headings bold?


Howdy :slight_smile:

Try this css and let me know if you like it :slight_smile:

.main-navigation .menu li a span {
font-weight: 500;
letter-spacing: 0.5px;