[Theme: Zerif Lite] – Make header logo larger?

yeah i want to know the same thing man.

how do you get the container for the logo to be bigger? It’s so tiny right now!

Hello,

To increase the header’s size, install Simple Custom CSS plugin, go to Appearance->Custom CSS and add this line:
#main-nav {min-height: 75px;}

75 is current value, change it according to your needs.

Kind regards,
Marius

Hi Marius
I’ve had the same problem as the last 2, and I’ve tried installing the custom css line, and it doesn’t seem to change the height of the header. Help? https://www.schnitzelmeister.ca
Glen

You are using Parallax theme, that’s another thing.

Marius

Apologies, I was monkeying around with another theme. I’ve activated Zerif Lite again, and tried the custom css. It still doesn’t seem to be doing what I want, which is to make the header area large enough to fit my logo. https://www.schnitzelmeister.ca
Thanks

Update: This problem is only on the front page, the code works on pages and posts.
G

Hello,

Sorry for the late answer, replace the previous code I gave you with this one:

#main-nav {height: 100px;}

Is it working now?

Kind regards,
Marius

Hello Marius,

Help, pre apologies, I’m no programmer or a web builder/master but I am trying to LEARN WordPress (yep a newbie). I am working in Zerif Lite (very nice BTW) and I have done the above: #main-nav {height: 100px;} to increase the area (or div/container, I’ve made one site in DW so I think that’s what it’s called) to place a logo in the “Simple Custom CSS” plugin. It works, sort of, giving more space for the logo on a computer & on an iPad (mini), just as I want. The problem is on the mobile/cell phone. When I view it the logo becomes hidden by the background image. I thought of changing the background or logo’s z-index but I don’t know what I’m looking for, or where to ADD it to?

I then notice on a cell as well as on an iPad that my site all moves when scrolled? Meaning the background image is not fixed into position & scrolls up with the rest of the page. But on a computer it’s fixed and the verbiage on the higher z-index levels rise up and float over the background image (as desired) how can I fix this for Mobile devices, that the background NOT scroll, that all floats up over it?

Then I also find that top 2 center buttons, sit where intended again on a computer & an iPad, but on a Cell though they stack one above the other, they are pulled over to the RIGHT side of the page, & get cut off. How may I center these that they sit above each other, centered in the middle?

Thank you for all of your help!

Hey,

Sorry for the late answer, what do you mean the logo gets hidden? Can you share a screenshot or link to your website so I can better udnerstand what it means?

Please mention what mobile device and browser you are using so I can test them as well.

Best regards,
Marius

Hello Marius,

Ah no worries, I’m happy to HEAR from you, thank you!

Yes, I DO have screen shots although I can see no place to attach them here, & your email looks to be a no reply, sorry.

I’ve 2 sites I’m working on simultaneously, per the logos getting ‘hidden’ the first is: https://www.gothamcityseo.com The second is https://seopalmbeachcounty.com < this one REALLY loses its logo behind the background while viewing on an iPhone 4, iPhone 5, iPhone 6 & Android in Google, Chrome, Safari, Firefox actually any browser on all these Mobile/Cell phones. Please know both sites Logo’s display fine while viewing on a Mac computer or an iPad (mini) it’s just on the Cells that it’s not good?

Also per the lost Scrolling effect, this feature works fine on a Mac computer (background image IS fixed into position as meant to be with verbiage on a higher z-index level, rising up, floating over the fixed background image), but when viewing on an iPad and an iPhone 4, iPhone 5, iPhone 6 & Android, again in Google, Chrome, Safari & Firefox it loses the scroll feature, EVERYTHING scrolls, as if locked together on one layer, not as desired. ??

Thank you again for your response and your help! Cheers!

A question that I have on this topic, is how do you make your logo extend passed the boundaries of the header period? Just like the sites you have shown I have tried to get my logo to extend downwards, however, no matter the size, it will automatically resize the the same as it was.

Thanks!

Hello,

We have read your messages and someone will answer your questions as soon as possible.

Best regards,
Alexandra

Hello Alexandra,

I appreciate the response, as well as the help from you & Marius…

@r1ch4rd25, for what I did, see the posts prior. I had done as Marius suggested, I searched & found this, then increased as shown:

#main-nav {height: 100px;}

That (sort of) worked to move the logo down but seems to get stuck behind my background image, while viewing on a cell device. Hence my issue…

Thank you Alexandra!

Hello,

I just checked your websites, the problem is that you are using very big logos.

1) You should remove the hambuger menu from mobile because you’re not using it. Add this CSS:

button.navbar-toggle.collapsed {
  display: none;
}

2) 100px is a value I gave you as an example, you should increase that value to suit your needs. Try 200px, it might be better.

Best regards,
Marius

How you managed to make the logo exceed the white line, I would like to do this but I’m also not able, can you explain me?