height of the top navigation bar.

Hey there seyiobasi,

How are you today?

If this is what you’re looking to do https://screencast.com/t/wKmLuQ9IvJ then please add the following CSS code to Appearance >> Theme options >> Custom CSS:

#header {
padding: 0;
height: 60px;
}

This should reduce the height of the header. In case you want to fill the side lines with the color of the navigation add this instead:

#header {
padding: 0;
background: #e8e7e7;
height: 60px;
}

Hope this helps ??

Best regards,
Bojan

Amazing. Thanks so much ??

Glad I could help ??

Cheers,
Bojan

Bojan, this fix helped me too. Thank you so very much.

I am hoping you might have an answer for my other 2 problems.

I want to make the header on zAlive wider. You gave me that answer already. But I want an image in the header and I have been able to add one to my header, but for the life of me I cannot figure out HOW to make the wrapper around the image large so I can see the entire image.

The banner I want to see is here, titled banner and what I am currently seeing is also here, titled header-issue
https://www.screencast.com/t/YYfRJkp8z

Could you help me with this?

The second issue is I would love to place links to my pages in the header, not to the categories. If you have any insight on how to do that that you could share, it would be so appreciated.

Thanks again,
Angela

Hey there Angela,

In order to help you with the header image I’d really need link to your site so I can try few things.

As for the menu you should be able to set the menu in Appearance >> Menus, add pages then check “Top Nav Menu” https://screencast.com/t/gHk3s94iSd9. This should add navigation in your header.

Best regards,
Bojan

Bojan: Thank you. The link to the site is:

https://5off20.com/alp97e/

I’m not that great at CSS and location of things so here is what I would like to do with the top nav bar.

I got the image to appear correctly and I go the links to the pages, not categoies, by using the menu creator. But things changed a bit over the last 4 days.

See this image
https://www.dropbox.com/s/bzu96lgy2jmgm5v/Screenshot%202015-02-17%2015.57.03.png?dl=0

I want to move the nav bar from over the image, to under the image (where God and County is now).

Any assistance with that would be fabulous.

Thanks,
Angela

Hey there Angela,

Thank you for the clarification, could you please try adding the following CSS as explained above:

@media screen and (min-width: 950px) {
#header {
height: 205px;
}

.navbar .nav {
top: 110px;
float: right;
}
}

This should be the result https://screencast.com/t/P63J7sSacBKI.

Hope this helps ??

Best regards,
Bojan

Bojan:

That is fabulous. Thank you, thank you.

If I understand what you did…

you made the header a fixed height to fit the picture in and
you moved the nav bar down 110px and moved it to the right, correct?

My results are perfect.

https://5off20.com/alp97e/

Hoping you have a marvelous week. And thanks again.
Angela

Bojan… Back again with one final question. Our Legion post decided to remove the Site name from the header completely.

I went to Appearance > Customize
Removed the site title and tagline

When I did that, my header photo got cut in half. I have no idea how to fix this.

Could you look one more time please?

https://5off20.com/alp97e/

Any help would be appreciated.

Thank you for everything.

Oh, and I would like to make the grey wrapper around the header image shorter as well. I don’t want to waste space under the top menu.

OK, I am done, lol. Thank you for any help.

Hey there Angela,

This is exactly what I did ??

As for the issue with the site title and tagline, could you please add them back and I’ll use CSS to remove them from your header in such way so they keep “occupying the same space” but not visible so we don’t have to add more changes to the header layout. Generally this should be possible with visibility: hidden;.

Once you do that I’ll take a look at the wrapper above and below the header image as well.

Best regards,
Bojan

Done

https://5off20.com/alp97e/

Thank you Bojan, you do know your stuff.

Hey again,

So to hide the site branding please try adding the following CSS:

.navbar .brand {
visibility: hidden;
}

This should remove the logo without affecting the layout of the header. As for the space above and below the header please try adding the following:

@media screen and (min-width: 950px) {
div#header {
padding: 0 0 20px 0;
margin-bottom: 0;
}
}

This should remove the space above and below the header.

Hope this helps ??

Best regards,
Bojan

Bojan:

Once again, that worked like a charm.

Thank you again for everything. The header is perfect now.

You really know your stuff.

Have a great weekend. And thanks for everything.

Hey Angela,

Glad I could help! Have a great weekend as well ??

Cheers,
Bojan