Navbar Transparent

6 posts, 0 answers
  1. Cristiano
    Cristiano avatar
    13 posts
    Member since:
    Nov 2012

    Posted 17 May 2013 Link to this post

    Hello,
    I wonder if it's possible to have the Navbar parent element with transparent background like the attachment.

    Cristiano
  2.
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 18 May 2013 Link to this post

    Hi Cristiano,

    Yes, all Kendo UI widgets can be customized using CSS. Please take a look at the following documentation article for further details. You may also use our mobile themebuilder as a starting point.

    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Cristiano
    Cristiano avatar
    13 posts
    Member since:
    Nov 2012

    Posted 20 May 2013 Link to this post

    Hi,
    thank you for your answer, but I can't find a solution.
    I have modified in my css these classes:
    km-header{
    background: none !important;
    }
    km-navbar{
    background: none !important;
    }
    but still have a background default color (light gray) that override all my css declaration.

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 21 May 2013 Link to this post

    Hi Cristiano,

    I believe the issue is caused by incorrect selectors - the CSS class selectors should be defined with a ".". I.e.: 
    .km-header{
        background: none !important;
    }
    .km-navbar{
        background: none !important;
    }

    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!
  9. Cristiano
    Cristiano avatar
    13 posts
    Member since:
    Nov 2012

    Posted 21 May 2013 Link to this post


    Hi,
    no, I only miswrote here in the forum.
    In my web app, I write the declaration as you did:
    .km-header{
        background: none !important;
    }
    .km-navbar{
        background: none !important;
    }
    That's not the right solution.

  11. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 May 2013 Link to this post

    Hi Christiano,

    Can you describe a bit what are you trying to accomplish? I believe there is some misunderstanding here, since the CSS provided does make your NavBar transparent but since the content element is below it and has overflow: hidden, it won't be visible under the NavBar when you scroll. Maybe you want all the scrolling content to pass under the NavBar? Then you need to remove the overflow: hidden from .km-content and move the background to the .km-scroll-container.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top