About logo position / Mozilla theme

i am using mozilla theme. logo is left corner. How can i set logo on same position with all categories button as original discourse themes.

Thank you.

You’d need to override the template. Add this under admin > customize > themes > edit HTML/CSS > </head>

<script type='text/x-handlebars' data-template-name='navigation/default'>
  {{#d-section bodyClass="navigation-topics" class="navigation-container" scrollTop="false"}}
  
  <!-- this is your custom logo, update as needed -->
  <a class="custom-logo" href="/">
    <img src="https://placehold.it/200x50" />
  </a>


  <!-- this is the existing nav, leave as-is -->  
  {{d-navigation
    filterMode=filterMode
    canCreateTopic=canCreateTopic
    hasDraft=draft
    createTopic=(route-action "createTopic")}}
{{/d-section}}
</script>

Then you’d need some CSS to position it correctly (add to admin > customize > themes > edit HTML/CSS > common)

.custom-logo {
  float: left; 
  margin-right: 1em;
}

You might need additional custom CSS for mobile as well as some other fixes, but the above gets the basic work done for you. If you’re curious about what all this is check out the handlebars template section of this post: Developer’s guide to Discourse Themes

4 Likes