How to Center the Logo in the Empty Header Style

cmaas231 · February 2022

What is the proper CSS code to center the logo when using the Empty Header Style?

Phil · February 2022

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

cmaas231 · February 2022

Here is the page. I was able to "kind of" get the logo centered but it's definitely not perfect and it's not responsive. I'd also like the logo in the stick menu as you scroll to be centered.

Thanks

https://www.1099marketing.com/gordons/

Phil · February 2022

Please, try the following one:

#Top_bar .logo{
 margin: 0 37%;
}
#Top_bar.is-sticky .logo{
 margin: 0 48.5%!important;
}

Thanks

cmaas231 · February 2022

That is wonderful!

Now how do I make the sticky logo and menu bar larger?

Phil · February 2022

You can use this code:

#Top_bar.is-sticky{
   height: 80px!important;
}
#Top_bar.is-sticky .logo img{
   max-height: 80px!important;
   height: 70px!important;
}

However, please, decrease the margin for a sticky header in my previous message to 47%.

Thanks

cmaas231 · February 2022

Works perfectly, thank you!

cmaas231 · February 2022

Hi Phil, I am looking for some additional help with this.

I made the logo and sticky header larger but it's squeezing the logo and I can't figure out the proper fix.
. Can I have the menu expand from the left instead of the right when clicking on the hamburger menu and also have the logo shown on the slide out menu?

Thanks!

Phil · March 2022

1) You need to decrease the margin value from the CSS code for the sticky logo I have sent you.

2) Unfortunately, none of these things are possible to achieve.

Best regards

How to Center the Logo in the Empty Header Style

Comments