Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Image on Navigation Bar

Home Forums Support Image on Navigation Bar

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #137570
    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!

    #137605
    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.

    #137629
    Tom
    Lead Developer
    Lead Developer

    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.

    #137732
    Sheri

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

    #137738
    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.

    #137768
    Sheri

    Thanks so much for the input!

    #137833
    bdbrown

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.