Unanswered

PowerApps Portal: Add image to the header navigation menu bar

(1) Share

Report

Posted on by Community Power Pla... Microsoft Employee

Hello Community,

In the Customer Service portal, does anyone know how to add image to the header navigation menu bar of the home page? When I hover over the navigator bar area, I don't see any "edit" menu tab where I could insert image file. Does anyone know where I could go to achieve this? Please see my attached picture for the navigation bar area I am referring to.

Thank you!

Categories:

Power Apps portals

I have the same question (0)

All responses (9)

Answers (0)

Sort by

oliver.rodrigues 9,482 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

Hi Eric

in that part of the header there is a content snippet that is rendered by default, which is the Mobile Header
you can make changes to this snippet to render your image there, another way to achieve this would be modifying the Header Web Template

------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @OliverRodrigues ,

Thank you for your reply!

I was able to locate the mobile header content snippet. Would you mind directing me to where I can upload the image against the content snippet? It doesn't appear to work the same way as the home page image where I could upload the image via the Notes?

Was this reply helpful? Yes No
oliver.rodrigues 9,482 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

it is also via Web Files: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/web-files

just upload your image in a note within a Web File
set the parent page as Home, and the Partial URL field is how you will access the image, for example myimage.png

with this you can access your image via <portal url>/myimage.png

don't forget to clear the cache

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @OliverRodrigues ,

Thanks again for your pointers. My apology for the many questions but something is not obvious to me here.

So as you have suggested, I have created a new web file where I store the image under the Notes section of the web file. I have called this web file homeheader.jpg and the partial URL is homeheader.jpg (basically, this is the image I would like to display in the header navigation area of the home page). So I got that part.

However, I am having trouble linking the web file above to the Mobile Header content snippet, which you mentioned is tied to the header navigation area of the home page. When I open the Mobile Header content snippet record in Portal Management, do I have to modify the HTML of the content snippet to point to the web file? Is that how it would work? My apology I am not good with HTML, so I am not quite certain what I should do here.

Your further advice would be greatly appreciated.

Thank you!

Was this reply helpful? Yes No
oliver.rodrigues 9,482 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!
Hi, you are in the right path

add or replace the entire content snippet (HTML) for something like:
<img src="/homeheader.jpg" style="width: 168px;height: 48px;">

of course the the sizes accordingly to what you need.. I would suggest playing with the browser by inspecting the element and setting the proper sizes you will need

hope this helps

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @OliverRodrigues ,

Thank you so much for the pointer! I followed what you suggested above, sync the configuration, clear portal cache, but I am still not seeing the image showing up on the header navigation...it's still a black area... Am I still missing anything? I have included some screen shots of what I am seeing...

Please kindly advise if you see anything obvious...

Thank you!

Was this reply helpful? Yes No
justinburch Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @Anonymous,
The bootstrap classes indicate you'll only see that content snippet when in "xs" range - can you verify by shrinking your window (with the header in view) and seeing if the image shows?
I believe you need to copy Oliver's recommendation to the "Navbar Left" Content Snippet for the non-small views (sm, md, lg, etc.).

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (1)

Report
Copy link

Link copied!

Hi @justinburch ,

Thanks for your inputs. Before updating the other Navbar Left" Content Snippet, I tried shrinking the window and I could see the following error message displayed in the header area:

Liquid error: Unable to cast object of type 'Adxstudio.Xrm.Web.Mvc.Liquid.SnippetsDrop' to type 'System.String'.

Could this be blocking the image from showing up?

Was this reply helpful? Yes No
justinburch Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Yes, it sounds like there's a liquid error, but the screenshots you've posted don't look incorrect. Have you made any other changes to them?

Was this reply helpful? Yes No