Brand Header

Hi
We’re currently setting up our very first Discourse forum and I am experiencing problems with this component.

I have added it to my theme and on my desktop I can see the brand bar.
But logged in on a smartphone I only see a blank space where the brand bar would be positioned (I have defined it with 40px height and position: fixed, top: 0)

Any idea why this is happening?

div.brand-header {
    position: fixed;
    top: 0;
    height: 48px;
    width: 100%;
    z-index: 1000;
}

.b-header {
    width: 100%;
    background-color: var(--tertiary);
    height: 48px;
    margin-bottom: 0;
}

Meanwhile the default d-header is defined as follows:

div.d-header-wrap {
    position: fixed;
    top: 48px;
    width: 100%;
    z-index: 1000;
}
1 Like

In addition to my question above:
I can see the brand header in a desktop browser reduced to mobile width. But on a REAL smartphone the brand header just dissappears, leaving just a space.

@pmusaraj Any idea why this is happening? Any case of workaround?

1 Like

@SchweizerSchoggi I don’t think you can fix this using just CSS. I did update the component now though, it has a new setting that lets you display it as a bar on mobile as well.

So, once you update, you need to enable show bar on mobile:

image

and it should then display it above the regular header. Keep in mind that this works well if you have very few text links given the amount of space available on mobile. (You can have a fair amount of icons, though.)

@downey this does what you asked for in point 2.

4 Likes

Thank you @pmusaraj , we might be on the right track with this update!
I can see the bar itself and the background color I’ve defined for it.
But unfortunatly logo and links on the bar are still invisible. :frowning:

While doing further tests I once set .d-header to display: none.

.d-header {
     display: none;
 }        

Interesting enough the brand-header was hidden as well. I guess this should not happen? For me it looked like a wrong encapsulation as on a desktop .b-header and .d-header are independent of each other.


Regarding the amount of links I already have a CSS based solution:
I am displaying link 1-4 for desktop, hiding link 5.
And displaying only link 5 for mobile, while hiding links 1-4.

I just need to see them on my phone :smiley:

1 Like

You can try disabling all your CSS customizations. If the component works fine then, you’ll need to go through your CSS and find what causes the logo and links on the bar to disappear.

2 Likes

Ah, I guess the main problem might be that the checkbox setting is not saved by simply checking or unchecking the checkbox. There might be a button to do this. Because currently when I check the “Show bar on mobile” checkbox it’s checked but when I am leaving the page and come back the checkbox is unchecked again. I might have overseen the save button?

1 Like

Do you see this after checking that checkbox?

You need to confirm your change by clicking on the green check button.

1 Like

snip

No, unfortunatly there are no buttons

1 Like

Ok, I think this is another issue with the theme. I can take a look in about an hour if you would like (I see that you are trialing our hosting).

2 Likes

That might be super helpful!! Thank you

1 Like

Yes, it was indeed a stying override issue. This bit of css was resulting in those buttons being invisible:

 .btn {
    background-color: #ffffff !important;
    color: #000000;
    border: solid 1px #f89300 !important;
    text-transform: uppercase;
    font-size: 14px !important;
    height: 40px !important;
    padding: 0 10px;
}

I commented this out for now (line 152 of your default theme’s Common CSS) and the buttons show up:

3 Likes

font-awesome dice icon not working

1 Like

Try using dice instead of fa-dice, and make sure you add it to the custom font awesome icons setting as well.

3 Likes

Works like a charm now, @pmusaraj - thank you so much for your active help.
Buttons are visible now and activating (and saving!) the option results in a perfect brand header bar on mobile for me :heart_eyes:

4 Likes

@vinothkannans How do I center the logo both horizontally and vertically on all devices? I don’t plan on using the links… just the logo.

1 Like

I think you could achieve it by adjusting CSS for the".b-header" class. Something like below can help

.b-header .title {
float: none;
display: block;
margin: 0 auto;
width: 105px; /* your logo image width */
}
2 Likes

Is this still active?

I’m having issues with icons showing correctly. I have this in the settings…

But this is what shows on the page…

image

It’s just blank spots where the icons should be. The links are there if I mouseover, but not the icons.

1 Like

Does it work if you replace fa-brands fa-youtube with fab-youtube in both the icons and custom font awesome icons sections? The same should work for the discourse icon as well. I’m not sure about the browser one.

3 Likes

Thanks!

It worked for fab-discourse.

It did not work for fab-youtube or fab-browser (or fa-solid fa-browser). I was basing names off of here: Browser - light | Font Awesome

1 Like

I’ve tried a few different things, still no luck. Just blank spots for the YouTube and Browser (website) ones.

1 Like