Help Center - Change design header to match hero image

Answered

12 Comments

  • Vlad
    Community Moderator
    The Wise One - 2022

    Hi Sara, you can try with this code,
    - remove whole current header code
    - paste my code there
    - and remove hero section from home page template.

    Does it work as needed? 

    <section class="section hero">
    <header class="header">
    <div class="logo">
    {{#link 'help_center'}}
    <img src="{{logo_url}}" alt="{{t 'logo'}}">
    {{/link}}
    </div>
    <div class="nav-wrapper">
    <span class="icon-menu"></span>
    <nav class="user-nav" id="user-nav">
    {{link 'community'}}
    {{link 'new_request' class='submit-a-request'}}
    </nav>
    {{user_info}}
    </div>
    </header>

    <div class="hero-inner">
    {{search submit=false instant=true class='search search-full'}}
    </div>
    </section>
    0
  • Sara Sanantonio

    Hi Vladan, thanks for the response and the updated code it helped. There just seems to be a bit of white left on the top that won't seem to go away.

    I activated our help center in case you wanted to take a look at the white bit in browser.
    https://getbreadcrumbs.zendesk.com/hc/en-us

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Glad that it helped! About white space, just put this code at bottom of your CSS. Cheers!

    header.header {
    margin-top: 0;
    }
    0
  • Sara Sanantonio

    Thanks Vladan! That worked like a charm :)

    0
  • Uri Flores

    How would I edit the header to show differently in a different page?

    0
  • Brett Bowser
    Zendesk Community Manager

    Hi Uriel,

    It looks like there's been no response from the community regarding your question so I wanted to quickly touch base and provide some documentation that you may find useful: 

     

    Additionally, we do have a Professional Services team available that can assist with setting this up at an additional cost.

    I hope the above information helps!

     

    0
  • Peter Barker

    Hi - not sure if this is in the right place but how can I change the standard community image (of 2 x people on bicycles) for a different image?

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Peter.barker - Take a look at this article here on how to change out the Community image - https://support.zendesk.com/hc/en-us/articles/206177737#topic_p1r_345_lw

    Best of luck!

    0
  • Andres Rincon

    @... When I made this change it looked great on home page, but on the community it is showing double headers. any suggestions?

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hey Andres, you just need to remove the hero section from the Community topics page as well. 

    The same as you did on the Home Page. 

    0
  • Victoria Campagna

    I made this change and it looks great, but how can I make it so that when the user scrolls down, the header remains and the background header color changes white?

    Thanks in advance for any help.

    0
  • Brett Bowser
    Zendesk Community Manager

    Hi Victoria,

    It looks like you haven't received a response to your question yet. While I can't assist with any custom code from my end, we do have some documentation available that could point your developers in the right direction:

    Let me know if you have any other questions in the meantime!

    0

Post is closed for comments.

Powered by Zendesk