How to adjust header logo size

Shapely
1

Hi,

I used the Child Theme: Child Theme: http://take.ms/sXFTG 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: https://ururkawadanigasoomaaliyeed.com

2

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

3

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?

Thanks

4

Hi,

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

#site-navigation {
    background: url('https://ururkawadanigasoomaaliyeed.com/wp-content/uploads/2018/04/Camel-2.jpg');
}

Change the image URL according to your own needs.

Let us know,

Thanks,
laranz.

5

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?

Thanks

6

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:

#site-navigation{
    background-size:cover !important;
    background-repeat:no-repeat !important;
}

Hope this helps.

7

Also is it possible to make the menu headings bold?

Thanks

8

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;
}