Archived topic

center logo above site title

7 replies · Started by Ron on November 22, 2021

Viewing posts 1–8 of 8

November 22, 2021 at 10:52 am #2015529

have tried different css this code comes the closest to what I want except not centering logo over site title it is sitting above on the left
thanks for your help

.site-branding-container {
    flex-direction: column;
}

.site-logo, .site-branding {
    width: 100%;
}

.site-branding {
    text-align: center;
}

.site-logo {
    margin: 0 !important;
}

.mobile-header-navigation {
  padding: 10px;
}

.column-shadow {
	box-shadow: 0px 0px 16px rgba(200,200,200,0.2);
}

.rounded-corners img {
border-radius: 12px;
box-shadow: 0px 0px 16px rgba(200,200,200,0.2);
}

 /* End GeneratePress Site CSS */

November 22, 2021 at 11:46 am #2015777

Hi Ron,

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

November 22, 2021 at 1:29 pm #2016090

ok pasted link in private info area

November 22, 2021 at 2:05 pm #2016167

Try follow the steps below:

1. Remove the CSS for header/navigation area.

2. Go to customizer > layout > primary navigation, set the navigation locationto below header.

3. Go to customizer > layout > Header, set Header Alignment to center.

4. Add this CSS:

.site-branding-container {
    display: flex;
    flex-direction: column;
}

Let me know if that works.

November 22, 2021 at 5:32 pm #2016530

thank you
you folks at Generatepress are the best

November 22, 2021 at 7:57 pm #2016662

You are welcome :)

November 23, 2022 at 8:55 pm #2430292

Thank you Ying for this code to centering logo on mobil header:
.site-branding-container {
display: flex;
flex-direction: column;
}
Is working perfectly!

November 24, 2022 at 3:36 pm #2431979

Hi Manuel,

Glad to hear that :)

This archived topic is closed to new replies.

Start building better websites today.