How do I center the logo on the main header?

support
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 Likes
3

Unfortunately, it didn’t work.

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

Screenshot
Screenshot.png1198×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;
}
2 Likes
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;
        }
    }
}
3 Likes
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%;
}