Brand Header

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

Try adding the custom icons in “svg icon subset” site setting.

2 Likes

Thanks. I’m really not sure what I’m doing with that. Is this correct? Those are the two I’m missing.

It didn’t solve it though, still getting…

image

I guess I’m doing it wrong.

1 Like


Screenshot 2022-05-17 at 1.07.53 PM

As you can see, the YouTube icon is working fine for me. Looks like the “fa-browser” is a pro icon. In that case, you need the below plugin and the auth code.

2 Likes

Could we get a “logo dark” option?

And maybe even a “Use default site logos” checkbox?!

(I hope to contribute to this kind of thing soon, but above my coding pay grade at the moment. Thank you for a wonderful component!)

1 Like

How do I change both the hover text and background color of the header menu?
I am not skilled with CSS?

The code and where to drop it would be helpful, thanks!

@vinothkannans

Hey @rickwatson, here’s some code to help you out. You will need to update the color/background-color values to be suitable to how you’d like it to look. Placing these in the common.css tab should work.

Background Color of Header Menu:

.b-header {
   background-color: var(--tertiary);
}

Links

.b-header .nav-pills>li>a {
    color: var(--secondary);
}

Links (on hover)

.b-header .nav-pills>li>a:hover {
    color: #001aff;
    background-color: red;
}

In regards to what values you can provide to the color and background-color properties, see here for more information. You can enter hex color codes, rgba values, hsa values, etc.

However, it’s recommended whenever possible to use existing CSS variables whenever possible so that you can maintain things like dark mode support.

You can find out what variables exist on your site and what colors they correspond to by checking in your browser’s developer tools (:link: how to access).

Once open check in the Styles tab for the declarations in color_definitions.scss on the :root selector.