Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / Styling the customer p...
Microsoft Dynamics CRM (Archived)

Styling the customer portal navbar left with an image

(0) ShareShare
ReportReport
Posted on by Community Member Microsoft Employee

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

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Styling the customer portal navbar left with an image

    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"

  • Verified answer
    OrchidC Profile Picture
    OrchidC 200 on at
    RE: Styling the customer portal navbar left with an image

    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

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Styling the customer portal navbar left with an image

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

     

     

  • Craig P. Fleming Profile Picture
    Craig P. Fleming 950 on at
    RE: Styling the customer portal navbar left with an image

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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,269 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,198 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans