Portal Header Size (Height) Issue

[lisarinehart]

I've updated my Content Snippet for the Header of my portal to include my company logo, and it looked great...until I accidentally clicked on the logo image in the visual studio editor (I'm guessing I did a imperceptible logo image resize) and now the header has shrunk, so the logo container is spilling out into the page section below. I can't figure out where the Header size coding is located, or how to undo/resize the header appropriately... help! 

I'd like to keep my Logo this size (and not puny sized to fit inside the new shortened header)...can anyone direct me where to resize the height of the portal header? AND perhaps how to size the header to match the height of content snippet size rather than a set pixel height (although either would be fine!)?

Here's an image of the issue

[Fubar]

If your image was just replacing the Contoso text in the header, then this is held in a Content Snippet - and there are 2 of them one for wide (Navbar Left) and one for mobile size (Mobile Header).  The more difficult thing is if you're height causes issues then you have to make multiple adjustments to the various CSS Media rules to accommodate it - just remember that when your browser window becomes smaller the nav menu changes (and  can mean a bit of work to get all the heights and widths correct).

[OliverRodrigues]

hi, you might be able to find the code in the Portal Management App

navigate to make.powerapps.com --> apps --> Portal Management --> Web Templates --> Header

this is liquid code responsible for rendering the header

[lisarinehart]

Thanks @OliverRodrigues - I do most of my editing in Portal Management & check visuals in the Studio...I'm a noob with liquid... what section of this code I should look in? (I tried a few things hesitantly before I posted, but I'm glad I was in the right place 🙂 ) 

I see there's 2 divs for the content snippet...did this duplicate as xs size in error?? also, I see an interesting sting at the bottom that i'm not sure of... see my screenshots below ...

See Green area: is this where my height issue lives?

and or/ see this bit of code... is it pertinent here? (i.e. what is the resize event, what is resize and why? ) 

Thank you very much!

[lisarinehart]

Thanks @Fubar , this is not the issue. I have already replaced the logo with the snippet code in the portal management and the sizing was perfect (via code, at width 15% of original image and height auto to maintain proportions. Unfortunately something weird happened and container now spills out on the page and resize with the page regardless of screen sizes or zoom...i.e. it gets proportionally large and maintains the over spill in concert with the rest of the page...this tells me its the snippet container sizing shifted out of the header and the header size has defaulted to the menu snippet height max, but no idea where this is located.

[ragavanrajan · Accepted solution]

hi  @lisarinehart  , 
 You are in the right place of web template. There are some approaches which I think would fix your issue 
 
1. Try deleting your company logo and upload the fresh logo
2. Using Portal studio > Sync configuration > then Browse website 
 
Because we have not modified anything on web template. Now it will bring back your original version. 
 
Then using custom css in the portal studio resize the logo according to your wish. 
 
 

img{ height: 55px !important; width:55px !important; } 

The above css will definitely override the image size. 
 
Additional: 
 
1. In the header web template 
 
2  . If you wish you can also check line 44 on how the image height and width has been rendered
 

 
Hope this helps. 
 
PS: It is a coincidence I did exactly the same issue yesterday while setting up logo. 
 
------------
 
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.

[OliverRodrigues]

The JS Function I believe is to set the navbar size for mobile/when resizing

you are at the right place, but the div you want to set the height is the one with the class navbar-header:

Ideally you should set that in the CSS (create a new one instead of making changes to the OOB bootstrap). Just as an example I am setting directly in the div element in the Header Web Teamplte

[OliverRodrigues]

hi @lisarinehart did my last answer help your issue? can you mark as the solution so other users can find it?

thanks

[lisarinehart]

thanks @ragavanrajan ! this worked great - (i tried to post a reply yesterday but there was a weird at every attempt.) I had to be creative and careful to delete just the image inside the snippet so as not to delete the snippet, then add a new image component, add the image & resize in the portal management html for the mobile header snippet (as I originally did). I will say that initially it looks like it might not work when you are going through the process, especially it if it's a large image that you are shrinking, but once you do that final step of resizing it goes right to where it belongs! (just in case anyone else is reading this and using this as their solution....be patient!) 

[lisarinehart]

Thanks @OliverRodrigues  - i did manage to get it without resizing the other snippet in the header template - that was going to be my next step. I will definitely keep that on the backburner if I need for other things. 🙂 definitely appreciate you help!