Styling the customer portal navbar left with an image

(0) Share

Report

Posted on by Community Member

Hi,

I am trying to add a proper image to the navigation bar of the CRM portal.

I want to stick to the Portal CRM framework and bootstrap way of doing things but I am not yet familair with this way of doing things.

Right now I edited the Content Snippet : Navbar Left, like this

<p><a class="homelink" title="BAAS" href="~/"><img style='width:80px' src='baassmalltalk.png' /></a></p>

I already hesitated to include the image width, but otherwise the screenshot below would not be possible.

3187.NavBar.png

The red arrow is to indicate that I want the logo to FIT in the navbar (preferably without having to specify a width, because of all the screen sizes we have today).

So my question is not so much on how to fix this with general web development skills, more on how to get this done while we keep leveraging the strength of the CRM Portal framework ?

In other words: how much of this instruction: https://getbootstrap.com/docs/3.3/components/#navbar-brand-image should we follow and where should we put the HTML ?

*This post is locked for comments

I have the same question (0)

All responses (4)

Answers (1)

Craig P. Fleming 950 on at

Like (1)

Report

Try using the class .img-responsive on your image tag. This should auto scale the image to the parent element.

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report

Thanks, but this does not help :-(

I can see the effect in developermode (from bootstrap.min.css): .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img

display: block;

max-width: 100%;

height: auto;

But the result is still the same ....

Was this reply helpful? Yes No
Verified answer

OrchidC 200 on at

Like (1)

Report

Hi,

I am always using the height only without width to preserve image ratio for the portal logo since navbar has fix height, try having 35px or 40px on the image.

- Chid

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report

Yes, but than it either gets too small (35px works , that way it is above the line) OR it keeps crossing the grey navbar line below (as in the image). To me it seems there is room voor a 50px logo in the div containing the image. the space above the logo seems to be "unused"

Was this reply helpful? Yes No