- This topic has 22 replies, 6 voices, and was last updated 2 years, 2 months ago by Fernando.
-
AuthorPosts
-
February 3, 2021 at 4:35 pm #1644884Raielene
My client would like his logo in the middle with a widget on the right and left sides. Is there a way to do this?
February 3, 2021 at 6:21 pm #1644949LeoStaffCustomer SupportFebruary 6, 2021 at 3:31 pm #1648611RaieleneDone!
February 11, 2021 at 1:14 pm #1655023RaieleneSorry… I meant I moved them to two separate widgets. Can you still help me with getting those to either side of the centred logo, please?
February 11, 2021 at 3:00 pm #1655098YingStaffCustomer SupportHi Raielene,
This CSS can move one of the widget to the left on desktop:
@media (min-width: 769px) { aside#custom_html-9 { position: absolute; left: 40px; top: 50%; transform: translatey(-50%); } .inside-header.grid-container { position: relative; } }
This helps center the logo if you need to:
@media (min-width: 769px) { .site-logo { margin-left: auto; } }
Let me know π
February 19, 2021 at 5:10 pm #1665115RaieleneThank you, Ying! This is very close to what he’s looking for, but not quite. Have a look: https://www.anewbreathcounselling.com/ The logo is just a touch too far to the left. How can we get it right in the center for all screen sizes?
February 19, 2021 at 6:04 pm #1665142YingStaffCustomer SupportAre you saying the desktop view? Try this CSS:
@media (min-width: 769px) { .site-logo { position: absolute; left: 50%; transform: translatex(-50%); } .inside-header.grid-container { padding-top: 80px; padding-bottom: 60px; } }
February 20, 2021 at 2:55 pm #1666046RaielenePerfect! That works and even fixed a bit of an overlay issue at certain sizes. Thank you so much! π
February 21, 2021 at 12:46 pm #1666908YingStaffCustomer SupportNo problem π
February 8, 2022 at 1:25 am #2109104RaieleneHi! I’m trying to do this same thing with another client’s site but this time I have the off-canvas menu in the left of logo spot. Looks and works good on desktop, but when I switch to mobile the menu and button are at the top of the logo and aligned left. I think I’d prefer the menu under the logo and then the button under that. Can you help again?
Also, I added “Menu” to the hamburger lines on desktop and would like to do the same for all. Is there a way to do that?
February 8, 2022 at 4:02 am #2109249ElvinStaffCustomer SupportHi Raielene,
Do you mean something like this? https://share.getcloudapp.com/llu6O9Kn
If yes, try this CSS:
@media (max-width:768px){ .site-logo { order: 0; width:100%; text-align: center; } nav#mobile-menu-control-wrapper { order: 1; } .header-widget { order: 3 !important; } }
February 12, 2022 at 7:40 pm #2116241RaieleneAlmost! I’d like the menu and button centred. And I’d like to add “Menu” to the hamburger lines, same as how they are on desktop.
February 13, 2022 at 8:28 am #2116831DavidStaffCustomer SupportHi there,
1. this CSS to center those elements:
@media (max-width:768px){ .header-widget .appointment { justify-content: center; } nav#mobile-menu-control-wrapper { margin: auto; } }
2. Go to Customizer > Layout > Primary Navigation and add your “Menu” label to the Mobile Menu Label field.
February 13, 2022 at 2:04 pm #2117082RaieleneAwesome! Thanks again!
BTW, support for GeneratePress is awesome! If you need a review, I’m happy to make one! π
February 13, 2022 at 2:41 pm #2117112DavidStaffCustomer SupportGlad to hear that!
If you want you can leave a review over at wordpress.org: -
AuthorPosts
- You must be logged in to reply to this topic.