Unite Theme: Center logo, social, nav bar

Hello,

I really enjoy the Unite theme and find the support forum very helpful. However I am having a difficult time using code from previous posts to accomplish -

  1. centering the logo
  2. centering social media icons
  3. centering nav bar

Usually I can center the logo and the social media icons disappear. I seem to be missing something. Would appreciate any help.

http://www.jackierutan.net/

Jackie

Hi Jackie,

I hope you are well today and thank you for your question.

I tried to visit your site but it’s displaying the following error message.

Forbidden - Visitors from your country are not permitted to browse this site.

Could you please make the site accessible for india where i live so that i can access it and help you?

Kind Regards,
Movin

Sorry about that. You should have access now.

I managed to get the navbar centered with this css.

.navbar-default .navbar-collapse {
display: table !important;
text-align: center;
margin: 0 auto;
}

However, I recently updated the theme and wordpress and my pages seem to be aligned left now. How can I center them as well as the logo and social media icons? Again, the social media icons tend to disappear when I center the logo.

Thank you!

To achieve this try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Unite Options -> Other -> Custom CSS

.site-branding {
    margin: 0 auto;
    float: none;
}
.social-header {
    float: none;
    margin: 0 auto;
}
.social-header nav#social {
    float: none;
    top: 0;
}
.page-template-page-fullwidth .row.pull-left {
    float: none !important;
}

That fixed everything! It looks great! Thank you very much!

You are most welcome here :slight_smile:

Hi,

I tried using the CSS code you supplied but it is still making my social icons disappear when I center the logo.

At first I thought was because of the size of the temporary logo I have placed up there. I resized the logo and it still is not showing the social icons.

It’s weird because when you’re in the customizer it shows the icons when you have it centered, but when you go to the live site they disappear.

I provided some screen shots to show for my client’s beautifulgiftbasketcreations.com site

Thanks for any help with this.

I do have other questions but I’m going to look at other threads to see if they are addressed already.

@blessed2behome To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/unite-support/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Hi Movin,

My website (jackierutan.com) on mobile is having a problem with menu bar that I believe is from the css to center the nav bar. You don’t need to click the menu button because the different menu pages are listed vertically on the home page. Is there a way to undo this?

Thank you in advance,
Jackie

It’s happening because of the following CSS code added in your site.

.navbar-default .navbar-collapse {
    display: table !important;
    text-align: center;
    margin: 0 auto;
}

To resolve the issue please remove the above custom CSS code from your site and use the below modified custom CSS code.

@media (min-width: 992px){
.navbar-default .navbar-collapse {
    display: table !important;
    text-align: center;
    margin: 0 auto;
}
}