How do I center the logo on the main header?

Product Support

AI-generated summary

Centering the Logo on the Main Header

BlackKnob is trying to center the logo on the main header, but has not found a solution. dax and ZackFea provided CSS suggestions, but they did not work.

BlackKnob shared a mockup of the desired outcome, including centering when the logo changes to the small logo + topic title.

tshenry attempted to help, but found that a cross-browser solution with pure CSS is tricky due to the structure of the elements. tshenry shared a rough, not fully working CSS that others can build upon.

Vaping_Community offered a simpler solution using the .logo-big class, which works for screen sizes above 1024x768, but may not be suitable for all users.

1

I triad adding the following css, it didn’t work though.

.title {display: block; margin: auto;}

2

Try this:

.navigation-topics .d-header .contents {
  text-align: center;
}
.navigation-topics .d-header .title {
  float: none;
  display: inline-block;
}
3

Unfortunately, it didn’t work.

here’s a mockup of what I’m trying to do:

Screenshot
Screenshot1198×943 128 KB

and I would like to preserve centering when the logo changes to the small logo + topic title.

Can somebody enlighten me how to do it please?

4

This should work:

.d-header .title {
    float: none;
    text-align: center;
}
5

Unfortunately that’s not enough to accomplish what the OP is asking for and has some adverse effects on the button panel without some additional CSS.

I played around with this for a little bit and haven’t come up with a cross-browser solution yet with pure CSS. The tough area is the centering when it switches to the small logo and topic title when scrolling down a topic. The structure of everything makes it pretty tricky.

The fiddling around I did made it look nice in an unmodified theme on desktop Safari, but Chrome and Firefox have issues. Here’s my rough, not fully working CSS just in case it gives anyone ideas or if anyone feels like building off of it:

.d-header {
    .contents {
        text-align: center;
    }
    .panel {
        float: none;
        position: absolute;
        display: inline-block !important;
        right: 0;
        text-align: initial;
    }
    .title {
        float: none;
        display: inline-block;
    }
    .extra-info-wrapper {
        display: inline-block;
        text-align: initial;
        transform: translateY(-5px); 
       
        .title-wrapper {
            width: 100%;
        }
        .topic-header-extra {
           position: absolute;
           top: 23px;
           margin-left: 65px !important;
        }
        .badge-wrapper.bullet {
            position: absolute;
            top: 25px;
        }
    }
}
6

If you just want to change the main logo to center and aren’t worried about how it looks on a screen smaller than say, 1024x768 you could use the logo class:

Place this in the Desktop section of your theme and adjust the padding as neccessary

.logo-big {
    text-align: center;
    display: inline-block;
    float: none !important;
    padding-left: 49%;
}