[Resolved] Image on Navigation Bar

[Sheri]

Is there anyway for your template (now also my template) to have the navigation bar look like the one on this website: http://votekeithperry.com/ with part of the header picture actually on the nav bar?

This is my working site: http://cms01013.apps-1and1.com/

Thanks so much!

[bdbrown]

Hi Sheri. The example you linked is actually using a separate image on top of the navigation bar so that should be doable if you have a separate image of Mr. Royal. A couple of thoughts – If you use the same photo of Mr. Royal as what’s included in the current header image, you could adjust the height of the header image to include the height of the navigation bar, then crop the bottom of the header image by the same height, then insert the new image of Mr. Royal using GP Hooks and position it exactly on top of the same part of the header image using css. Or you could cut Mr. Royal’s image out of the header image altogether, then just add and position the new image as you like, which is what it looks like they did on that site. You’d also need to move the menu to center or right justified. Hope that helps.

[Tom]

Yea, you would need to upload the picture of him as a logo, and then do something like this:

.site-logo {
      position: relative;
      bottom: -100px;
}

You’d have to adjust that number.

Then you would have to align the navigation to the right.

Will take some tweaking, but it’s definitely do-able.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sheri]

Yes, this works, but how do I get the image (Logo) to be in front, or top of the navigation bar?

[bdbrown]

I don’t see a separate image for Mr. Royal. If you remove his picture from the current header logo image, then use that header image (without his picture) as the header background, then you would upload his separate image as the logo and position it on top of the navigation bar, either using the css Tom provided or absolute positioning.

[Sheri]

Thanks so much for the input!

[bdbrown]

You’re welcome. Let us know how that works out.

[Author]

Posts