Jump to content


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


navbar background image

Recommended Posts


How can I make the following image url into the background for the navbar


url: <a href="http://imgur.com/7zskto0"><img src="http://i.imgur.com/7zskto0.jpg?1" title="Hosted by imgur.com" /></a>


area to add code to: navbar fix navbar-content-width pl-color-blue

Share this post

Link to post
Share on other sites
James Giroux

you would have to jump into the LESS.  specifically on line #233, I think you can change the gradient there for a background image.  Not 100% sure on that one though as I haven't personally tested it.

James Giroux, CEO

Share this post

Link to post
Share on other sites

The simplest method is to create a custom class that includes your image, for example:

.my-navimg {
background: rgba(0, 0, 0, 0) url(http://i.imgur.com/7zskto0.jpg) top left repeat;
.my-navimg .navbar {
background: rgba(0, 0, 0, 0);

Click publish and refresh your site once the changes have been saved. Your Navbar should now have that image as its background. Please be aware that some additional styling may be required and we do not provide custom CSS support.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • 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+
      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.
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • Dan Haddock
      By Dan Haddock
      Hi Pagelines team and wider community,
      I am looking to develop a single post page for my blog. I have read over an old article on the subject, however the link provided on achieving this goal was giving me security warnings. Is there any way I can get round this?
      Secondly, I have had a root around the .zip file provided on my sites backup, however was unable to locate any file in there with the name of Single.php. Does this file exist in the Pagelines theme?
      By the way, this is the unsafe article: http://support.pagelines.me/docs/customization/create-a-custom-page-template/ (Click at your peril).