Jump to content


Photo
- - - - -

Changing Nav Bar Background to an image

change nav bar image

  • Please log in to reply
3 replies to this topic

#1 njumara

njumara

    Advanced Member

  • Members
  • 95 posts
  • Country: Country Flag

Posted 08 October 2013 - 07:18 AM

Hi guys,

 

I have a client that would like their main nav bar buttons to appear as though they were hanging off of a branch.

 

So far, I've got some graphics that don't look totally atrocious and here's the solution I've come up with, but am unsure how to execute:

 

1) How do I change the background of the nav bar to the graphic that I have created. I will save this graphic as an image and was thinking there's probably some way I could swap out the existing black box behind the nav bar for the image/graphic that I've created.

Anyone know how to do this?

 

2) Does anyone have a better idea?

 

Thanks!

Nick



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17666 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 October 2013 - 10:40 AM

Hi,

 

Replacing the Navbars background color isn't a big issue, all you will need to do is override the default CSS, you can use the code below to get you started.

 

 #site .navbar {
background-image: url(path to image);
}

 

However, you may need to include some additional styling, especially for responsiveness. I recommend you read though our override default CSS documentation here - http://docs.pageline...ing-default-css



#3 njumara

njumara

    Advanced Member

  • Members
  • 95 posts
  • Country: Country Flag

Posted 08 October 2013 - 03:14 PM

Hi Danny,

 

Thanks for the response. I will start with this code and see how it goes.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 October 2013 - 06:53 PM

Please let us know how it goes.







Also tagged with one or more of these keywords: change, nav bar, image