Jump to content

Archived

This topic is now archived and is closed to further replies.

njumara

Changing Nav Bar Background to an image

Recommended Posts

njumara

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

Share this post


Link to post
Share on other sites
Danny

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.pagelines.com/customize/overriding-default-css


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
njumara

Hi Danny,

 

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

Share this post


Link to post
Share on other sites
Rob

Please let us know how it goes.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • Kedark
      By Kedark+
      Hello,
      I apologize for the trivial question, but I can not deal with it. How do I turn off the display of a distinctive image on the page? (I have to add it because I use plugins that use it), but as I display the page, I do not want it to be visible (and appears above the subject.).
      Probably a cliché but I can not deal with it. Therefore, a request for help.
      Regards
      RKA
    • mtaus
      By mtaus+
      I have added a Lax section on the footer of this site: http://www.ics-law.org.php72-38.lan3-1.websitetestlink.com/ but the background image is not displaying. When I first add the image it appears in the background, but then after saving and reloading it is gone even though the thumbnail indicates it's still there. Screenshot attached.
      Any suggestions?

    • mtaus
      By mtaus+
      I'm trying to add a Careers page to a site to display job openings. The plan is to create a Post using a subcategory 'Careers' and then display those on the page. All of the post sections in PL seem to include images and there's no obvious way to remove them or include an excerpt from the post. 
      Any suggestions?
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • BentleyD
      By BentleyD+
      Hey there,
       
      I am working on BentleyRolling.com. I used grams on MoonbodySoul.com and all the images are cropped to a square, whether they are square or 4:5 when posted on instagram, they still get cropped to a square. This looks way better than some being squares and some being 4:5. Did something change since I designed MoonBodySoul.com with Platform5? Can you help me crop all images to a square on BentleyRolling.com 
       
      All the best,
       
      Bentley
×