Hello guys. Is there any way to create fully custom header and do modifications with code.
For example i need to move panel from header to list-controls container
to make something like this ?
so no any suggestions ?
These kinds of changes usually require a custom plugin.
If you’ve never built a Discourse plugin before, here’s a guide to get started:
If you’re stuck on a more concrete problem, I’m sure you’ll get an answer here 
Alternatively, if you don’t want to build the plugin yourself, you can also create a topic with your budget in #marketplace.
2 Likes
I need a plugin to move some html code ??? This is ridiculous
You can try something like this to start:
.panel.clearfix {top: 65px;}
#create-topic {margin-right: 130px;}
but you will need to test all the resolutions of the most used devices and adjust the css with the media queries and foresee all situations where a user might have problems.
(that’s why @fefrei told you to write a plugin, generally it is more maintenanceable)
3 Likes
not a good idea. i need to move element from header, and make .d-header { display:none }
What is the purpose of making the entire header invisible if I can ask?
I’ll recommend you to think about your language 
Discourse isn’t just plain HTML and CSS. Your request will change how the normally structure is build, as far as i know. So that’s why people recommend you to make a plugin. You could also look into a theme-solution, but i would not recommend that for that kind of changes
Update: Fixed typos. My keyboard isn’t happy about the English lang.
2 Likes
Do you really need to replace the existing header? If you’re fine with adding an additonal header (line) on top, things get way easier. You can get something like this up and running in a few minutes:
1 Like
Yes, I actually already do this. But my problem is not going anywhere. I need to move user panel right after the ‘new topic’ button. I can do this like @Trash say, but i think absolute positioning is not good way, because on another pages, this panel will be just floating in free space
Also consider hiding the discourse header means hide the title of the discussion (and eventually the category and tags) and moving the navigation menu outside the header means that a user has access to essential features only on the homepage.
Look for a way to integrate the two menus that do not involve making the discourse header invisible. Otherwise you could make your site really complicated to navigate.
Your custom menu is a dropdown menu?
If it is not, you can enter the menu into the discourse header for example.
3 Likes
I am still having trouble understanding when “docked” gets applied as a class to the body. And so I feel like I am playing whack-a-mole with the various pages and display: none-ing everywhere. What is the best way to have a custom home page and hide it everywhere else? (reference: https://community.mistyrobotics.io/)
One way to do that is to hide / show the custom content on based on the url.
Something like this:
<script type="text/discourse-plugin" version="0.8.16">
api.onPageChange((url) => {
// hero hidden by default
$('#home-hero').hide()
// if on homepage(s), show hero
if (url === '/' || url === '/latest' || url === '/top' || url === '/categories') {
$('#home-hero').show()
}
});
</script>
This works but is not ideal as it checks on every page change.
3 Likes