cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
D365_Eric
Helper IV
Helper IV

PowerApps Portal: Add image to the header navigation menu bar

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!

 

9 REPLIES 9
OliverRodrigues
Super User
Super User

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.




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.

Power Apps Portals Super User


Oliver Rodrigues


 

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?

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




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.

Power Apps Portals Super User


Oliver Rodrigues


 

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!

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




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.

Power Apps Portals Super User


Oliver Rodrigues


 

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!

Hi @D365_Eric,

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.).

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?

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?

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,883)