How to Center the Logo in the Empty Header Style

cmaas231

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

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cmaas231

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

Please, try the following one:

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cmaas231

That is wonderful!

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

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cmaas231

Works perfectly, thank you!

cmaas231

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

1. I made the logo and sticky header larger but it's squeezing the logo and I can't figure out the proper fix.
2. . 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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next