Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 14, 2017 at 7:00 am #107048
    [email protected]
    Participant

    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;
    }

    January 14, 2017 at 10:56 am #107058
    Pratik
    Participant

    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;
}
    January 14, 2017 at 8:10 pm #107082
    [email protected]
    Participant

    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!

    January 15, 2017 at 9:52 am #107108
    Mahesh
    Participant

    @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

    January 16, 2017 at 12:46 am #107162
    [email protected]
    Participant

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

    January 16, 2017 at 10:15 am #107193
    Mahesh
    Participant

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

    Regards,
    Mahesh

    January 17, 2017 at 12:30 am #107231
    [email protected]
    Participant

    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!

    January 17, 2017 at 10:30 am #107244
    Mahesh
    Participant

    @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

    January 17, 2017 at 7:26 pm #107277
    [email protected]
    Participant

    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?

    January 18, 2017 at 9:55 am #107325
    Mahesh
    Participant

    @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

    January 18, 2017 at 5:47 pm #107373
    [email protected]
    Participant

    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!

    January 19, 2017 at 9:46 am #107432
    Mahesh
    Participant

    @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
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘How to Center Logo’ is closed to new replies.