How to customize the header?

In fact I would like to swift the actual 109 x 32 picture by a 500 x 200 picture.

Hi,

Please give me the link to your site so I can check how the logo is looking now, and give you the link to make it look perfect. ??

Regards,
Hardeep

Hi Hardeep,

My website is not on the net, I work on local.

Maybe you don’t understand me because I made a confusion between Header and navigation banner.

I just want to how to customize this banner (the first element at the top of the screen with:
The logo Zerif Home Our Focus About Us Our Team Testimonials Contact Blog (submenu)

My idea is to install a large picture (width 100%) as a background photo of this navigation banner.

Thanks.

Hi,

Can you give me the link to the images you want to use so I can get a better understanding of the design? ??

Regards,
Hardeep

Hi Hardeep,

I would like something like this :

https://www.webdesign.org/img_articles/16870/quick_banners30.jpg

Hi,

To reduce the logo size to look perfect, add the following CSS code to your WordPress, using Simple Custom CSS plugin:

.navbar-brand img {
    height: 60px;
}

And to make the theme bigger, you can add the following:

#main-nav {
    height: 260px;
}

Hope this will work. ??

Regards,
Hardeep

Thanks.

I had the same problem and it seems that here is missing a part of the code so the solution is complete. I send you mine:

#main-nav {min-height: 119px;}

.navbar-brand img {
height: 114px;
}

The “min-height” is important, specially for the mobiles, so the logo and the “hamburguer menu” appears ok, and not behind the background image.

Best regards from Chile!

Hello,

Thank you very much for sharing your solution with the rest of us. ??

Best regards,
Alexandra

Plop.
Now the changes I made for my website, don`t appear!

What could happen?

My website is https://www.arcop.cl

And the code that I wrote in style.css in the child theme is:

#main-nav {min-height: 119px;}

.navbar-brand img {
height: 114px;
}

I adjusted the height of the menu bar with (height)

#main-nav {height: 125px;}

And I adjusted the height of the logo with (min-height)

.navbar-brand img {
min-height: 110px;
}