[[email protected]]

Hello,

I am using the Catch Responsive Free theme and can’t seem to figure out how to center my logo. Can you help me?

Here’s my site: http://cardiocraving.com/

Here is the HTML on the stylesheet:
/*————————————————————–
10. Header Area
————————————————————–*/
#site-branding,
#site-logo,
#site-header {
display: inline-block;
float: none;
}

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

#site-logo a {
display: block;
line-height: 0;
}

#site-header.logo-enable.logo-left {
padding-left: 10px;
}

#site-header.logo-enable.logo-right {
padding-right: 10px;
}

.site-title a {
color: #111111;
}

.site-title a:hover {
color: #1b8be0;
text-decoration: none;
}

.sidebar-header-right,
.sidebar-header-right .widget-wrap {
float: right;
}

#header-featured-image {
clear: both;
display: block;
line-height: 0;
width: 100%;
text-align: center;
}

#masthead .search-field {
float: right;
font-size: 14px;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
width: 90%;
max-width: 250px;
border:1px solid #b6b6b6;
background-color:#d7d7d7;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 2px 5px #c4c4c4, 0 1px 0 #fff;
-webkit-box-shadow: inset 0 2px 5px #c4c4c4, 0 1px 0 #fff;
box-shadow: inset 0 2px 5px #c4c4c4, 0 1px 0 #fff;
color:#777777;
}

[Pratik]

Hi @[email protected],

You can try following CSS Code in Appearance=> Customize=> Additional CSS:

#site-logo, #site-branding {
    text-align: center;
    width: 100%;
}

/* Sidebar Header Right */
.sidebar-header-right {
    clear: both;
    display: inline-block;
    float: none;
    text-align: center;
    width: 100%;
}

#masthead .search-field,
.sidebar-header-right .widget-wrap {
    float: none;
}

[[email protected]]

Hi Pratik,

Thank you for the help but this code actually moves the search bar and social widgets to the center instead of the logo. Do you have another suggestion?

Thanks!

[Mahesh]

@jennafox1027gmail-com: If you want to center the Logo only, please add the following CSS:

#site-branding {
    display: block;
    text-align: center;
    width: 100%;
}

Note: This will keep the widgets to the right but will move below the logo.

Regards,
Mahesh

[[email protected]]

This is still not working! There must be a way to do this! Please let me know other suggestions.

[Mahesh]

@jennafox1027gmail-com: How do you actually want it to be displayed?

Regards,
Mahesh

[[email protected]]

Hi Mahesh,

I would like the entire logo to be centered horizontally on the page. It should be centered on the page rather than being off to the left like it is now.

Thanks!

[Mahesh]

@jennafox1027gmail-com: The CSS above I’ve provided will center the logo.
https://catchthemes.com/support-forum/topic/how-to-center-logo/#post-107108
Please check image in the link below:
http://bit.ly/2jE0B9K

Regards,
Mahesh

[[email protected]]

Yes, that is exactly what I’d like it to look like but it’s not working for me. I am putting your code into Appearance —> Customize —> CSS. Should I be putting it into the CSS stylesheet? And if so, how do I do that?

[Mahesh]

@jennafox1027gmail-com: Putting the code in Additional CSS should work fine. I checked your site, you’ve put the code but its displaying as comment because of /* and */ and in CSS everything comes between these are treated as comment. Please delete /* and */ and just put the code, nothing else.
Hope this helps.

Regards,
Mahesh

[[email protected]]

Thank you! I did not know that! It finally worked! Thank you so much for the help! I apologize it took so long to figure it out!

[Mahesh]

@jennafox1027gmail-com: Thank you for your appreciation. If you like my support and Catch Responsive theme then please support by providing your valuable review and rating at https://wordpress.org/support/view/theme-reviews/catch-responsive?rate=5#postform
Have a nice day!

Regards,
Mahesh

[Author]

Posts