Add a corporate logo to navbar

3 posts, 0 answers
  1. Jim
    Jim avatar
    5 posts
    Member since:
    Jan 2013

    Posted 13 May 2013 Link to this post

    Hi - I have a requirement to show our corporate logo from every view, and their preference is to show it in the left-side area of the navbar.  I have it showing up, but it is not vertically centered, and I have tried a number of things. I've tried vertical-align:middle, and margins:auto, but neither have worked so far:

    <header data-role="header">
        <div data-role="navbar">
            <img id="corp-logo" src="images/app/corp-logo.png" 
               data-align="left" style="width:120px;height:30px;vertical-align:middle;"/>
            <span data-role="view-title"></span>
        </div>
    </header>

    and...

    <header data-role="header">
        <div data-role="navbar">
            <img id="corp-logo" src="images/app/corp-logo.png"
               data-align="left" style="width:120px;height:30px;margin: auto .3em auto .3em;"/>
            <span data-role="view-title"></span>
        </div>
    </header>

    What would be preferred approach approach for vertically aligning a logo image within the navbar area?
    Thanks, Jim Wangler
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 14 May 2013 Link to this post

    Hello Jim,

    In order to achieve the desired outcome you could set top margin to the image. For example: 
    <img id="corp-logo" src="//...." data-align="left" style="width: 120px; height: 30px; margin-top: .4em"/>

    Let me know if this fits your requirements.

    Kind regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jim
    Jim avatar
    5 posts
    Member since:
    Jan 2013

    Posted 16 May 2013 Link to this post

    Yes, that does it - thanks.
Back to Top