Thanks! Turns out I did not have time to make a proper PR, do you think you’ll be able to add the below/above site header setting?
1 Like
@salmanfarisvp by default, it’s using the “tertiary” color from the palette. If you like to set a custom color then use the below CSS code.
header.b-header {
background-color: #ED207B;
}
@Stanzilla sure I will add it to my list. But it’s not in my roadmap for now.
3 Likes
My desktop version still looks stellar, but my mobile version has recently started displaying in this way. I know this was in the works for a future update, so it’s probably intentional. Is there a way to set my desktop background as one color and my mobile as another?
Desktop:
Mobile:
1 Like
Anyone experiencing the same?
1 Like
I don’t have the color issue that you do on your left, but the multiple “hamburgers” isn’t ideal…
I would almost rather have it disabled from the mobile version. Granted, I’m a fan of absolute simplicity on mobile devices where every pixel counts.
3 Likes
Agreed. I might just disable it for now. Two hamburgers is looking very strange.
2 Likes
This is caused by some custom CSS you have in your theme. You have this in your light theme in the common section.
header.b-header {
background-color: #378899;
}
The common stylesheet applies to both desktop and mobile. Either move that rule to the desktop section or change it to look like this.
.desktop-view header.b-header {
background-color: #378899;
}
7 Likes
Ahhh, thank you!! Not all heroes wear capes. 
5 Likes
Hi, I’ve added ex. ‘twitter,https://www.twitter.com/myAccount, _blank’ into the Icons field. I’m getting an invisible rectangle in the brand header. Meaning I can rollover it and see the link but no icon. I assumed the icons were built into the component. Am I missing something here? Do I need to do this manually? If so, please explain.
my dev site - https://community-test.cambiumnetworks.com/
icons are to the right of ‘What We Do, Blog, Support’ links.
thanks,
Kurt
For anyone having this issue, see this documentation Introducing Font Awesome 5 and SVG icons
I needed to add fab- prefix like so - “fab-twitter, https://www.twitter.com/myAccount, _blank”
I would recommend to the owner of Brand header theme component to update your example image https://d11a6trkgmumsb.cloudfront.net/original/3X/e/8/e8eb30f6d18585d13df5ad4cc0e63578ef553de7.PNG to reflect the change in how to add icons with fab- prefix.
thanks,
Kurt
2 Likes
Good point, the OP has been updated.
3 Likes
right below the image is text that says the same. Ideally it would be updated there too to avoid any confusion. Thanks for the quick reply.
best,
Kurt
2 Likes
I just posted an update to this theme component that fixes an incompatibility with this commit from earlier today in core. Sites using this component should update the component before updating core or immediately after updating core.
(If you don’t update the component, the styles for the brand header will be missing after a core deploy.)
5 Likes
I am running into an issue where enabling this removes the standard Discourse header all together and also the new brand header is not included.
I looked around and couldn’t find anything on this issue. This is a brand new Discourse installation, everything else is working smoothly.
Any ideas? Thanks!
1 Like
I couldn’t reproduce this on my local site. Do you have any other components on the same site? Do you see any errors in the browser console?
3 Likes
Thank you for getting back to me! I was able to get it working. In case it helps:
- I set it up initially by entering only the site title and URL, and a couple menu items, but no URLs attached to them - this is where the behavior described above occurred
- I added URL to the menu items, and now the header works as expected
So it seems, perhaps, that it doesn’t render correctly unless at least one menu item has both text and URL parameters set.
4 Likes
Seems like it would be very useful to be able to add attributes to the header links somehow, e.g. for css class, target, etc.
1 Like
-
I love this theme component! It will make our design people happy and help Discourse blend in with our other web stuff. (Once I figure out some CSS positioning issues to try to make it match the other site as much as possible.) Yay!
-
Does anyone know if there’s a way to not “combine” the two headers on mobile? I would like to keep the same look and feel as desktop where there are two header lines, rather than the “double hamburger” which we also find confusing as someone earlier in this topic mentioned.
2 Likes
I have had a query as to why the menu is not working on mobile devices. The user pressed on the left burger menu but then on a menu link - and his perception was it wasn’t working as the menu still filled most of the screen.
I’ve had to explain you need to touch somewhere on the right of the screen, to the side of the menu, to close it.
Would it be possible to make it more intuitive, either by:
- Auto-closing the menu when you click on a menu link on mobile devices?
- Including a ‘Close Menu’ button on mobile devices?
1 Like
I’ve been meaning to make a similar request. I often try to dismiss the menu on mobile by swiping it to the left. It appears to be working, but then it pops back into place. The other menus in Discourse it works to swipe them back to the side to dismiss them.
1 Like