Skip to content
Catch Themes Logo

Catch Themes

Premium Responsive WordPress Themes with advanced functionality and awesome support. Simple, Clean and Lightweight Responsive WordPress Themes

  • Home
  • FSE Pro Plugin
  • Themes
  • Features
  • Hosting
  • Support
  • Blog
  • My Account

Logo centered over the header image

Support Forum Catch Evolution

Tagged: center, logo, title

  • This topic has 25 replies, 3 voices, and was last updated 9 years, 3 months ago by Pratik.
Viewing 20 posts - 1 through 20 (of 26 total)
1 2 →
  • Author
    Posts
  • February 12, 2016 at 8:32 pm #85283
    riccrom123
    Member

    Hi thank you for this beautiful theme! I would like to know how to remove the header-content above the header-image and put the logo centered over the header-image.

    February 13, 2016 at 7:21 am #85313
    Pratik
    Participant

    hi @riccrom123,

    Please post in your site url so i can check it.

    Regards,
    Pratik

    February 13, 2016 at 1:22 pm #85322
    riccrom123
    Member

    thank you for your quick reply
    http://fabricfoto.it/testcatchevolution

    February 13, 2016 at 5:38 pm #85331
    marga
    Participant

    Hello Pratik,

    I have the same issue in http://testwp.heilpraktiker-schirnig.de/

    greetings Marga

    February 13, 2016 at 7:38 pm #85344
    Pratik
    Participant

    Hi @riccrom123,
    I cannot see a logo currently in your site. Please add it and let me know. Then I will provide you with CSS code.
    ———————————————————————————
    Hi @marga,
    Do you want to remove gap in header content and center the logo a well? For that, you can add following CSS code in Appearance=> Customize=> Theme Options => Custom CSS box:

    
    /* Remove Header content top gap */
    #header-content {
        padding-top: 0;
    }
    /* To center logo */
    #site-logo {
        margin: 0 auto;
        width: 100%;
    }
    

    Let me know how it works out.

    Regards,
    Pratik

    February 13, 2016 at 8:00 pm #85346
    marga
    Participant

    Great thanks Pratik,
    this works,
    now I also would like to center the text underneath the logo as well
    greetings
    marga

    February 14, 2016 at 2:42 am #85367
    riccrom123
    Member

    I don’t know why the logo is not shown. In theme settings I uploaded the logo..

    <div id=”site-logo” class=”clear”>Proravera</div>

    if I inspect the page with chrome it says 0 x 0 pixels (Natural 292 x 190 pixels)

    February 14, 2016 at 2:45 am #85368
    riccrom123
    Member

    the html code in my message was interpreted

    <///div id=”site-logo” class=”clear”>Proravera</div///>

    February 14, 2016 at 2:48 am #85369
    riccrom123
    Member

    I try again

    <///div id=”site-logo” class=”clear”><///a href=”http://www.fabricfoto.it/&#8221; title=”Proravera”>Proravera</div>

    February 14, 2016 at 2:49 am #85370
    riccrom123
    Member

    <***div id=”site-logo” class=”clear”><***a href=”http://www.fabricfoto.it/&#8221; title=”Proravera”><***img src=”http://www.fabricfoto.it/wp-content/uploads/2016/02/logo_292x190.png&#8221; alt=”Proravera”></div>

    February 14, 2016 at 9:26 am #85384
    Pratik
    Participant

    Hi @marga,
    You can add following CSS to center the Site Title:

    
    #site-details {
        text-align: center;
        width: 100%;
    }
    

    ———————————————————————————-

    Hi @riccrom123,

    The logo is not showing due to Plugins conflict. It is strange but the plugins are adding CSS to .clear class. Please deactivate another-wordpress-classifieds-plugin and Simple Shortcodes plugin, then the logo will be visible. Then I will be able to help you with custom CSS.

    Regards,
    Pratilk

    February 14, 2016 at 1:20 pm #85394
    riccrom123
    Member

    Hi Pratik
    I just deactivated simple shortcodes plugin and now the logo is shown.. Tell me if must to deactivate also the other plugin

    February 14, 2016 at 1:32 pm #85395
    Pratik
    Participant

    Hi @riccrom123,
    No need to deactivate another plugin. Now, to remove gap in header content and center the logo, you can add following CSS code in Appearance=> Customize=> Theme Options => Custom CSS box:

    
    /* Remove Header content top gap */
    #header-content {
        padding-top: 0;
    }
    /* To center logo */
    #logo-wrap {    
        text-align: center;
        width: 100%;
    }
    #site-logo, #site-details {
        float: none;
    }
    

    Let me know how it goes.

    Regards,
    Pratik

    February 14, 2016 at 2:31 pm #85396
    riccrom123
    Member

    Thank you Pratik in the next step I would like to put the logo centered in the header-image. Sorry but my english is not so good so I explained it bad..

    February 14, 2016 at 3:45 pm #85400
    marga
    Participant

    Thanks, Pratik this works…

    greetings Marga

    February 14, 2016 at 10:54 pm #85417
    riccrom123
    Member

    In other words i would like to move the div header-content inside the div header-image or contrary.

    February 15, 2016 at 9:32 am #85446
    Pratik
    Participant

    Hi @marga,

    Glad everything worked out. If you liked our theme and support, please leave us your valuable review at here.
    ——————————————————————————————————————————————————————–
    Hi @riccrom123,

    I do not understand what you mean because if you move header-content inside header-image, there will be no difference. I think you the header image to be the background of your logo. It that is the case, you first need to add following CSS code in Appearance=> Customize=> Theme Options => Custom CSS box:

    
    #header-content {
        background-image: url("http://www.fabricfoto.it/wp-content/uploads/2016/02/testata_1600x230.png");
        background-size: cover;
    }
    

    Then remove the header image by going to Appearance=> Customize=> Header Image and Clicking on Hide Image.

    Maybe you will want to hide the Site Title from there too. To do that, go to Appearance=> Customize=> Site Identity and uncheck “Display Header Text” option.

    This should solve the issue as you want. If not, please let me know and I will assist you further.

    Regards,
    Pratik

    February 15, 2016 at 3:04 pm #85475
    riccrom123
    Member

    very well pratik! Now, if I’m not asking too much, I would like to see the full background at every resolution. Also the logo have to resize to mantain the correct proportion
    For the background I tried with this code but doesn’t work together with the logo:

    #header-content {
    width: 100%; height: 100%; top: 0; left: 0;
    background: url("http://www.fabricfoto.it/wp-content/uploads/2016/02/testata_1600x230.png") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    maybe I solve designing the logo in the background…

    February 15, 2016 at 3:13 pm #85476
    riccrom123
    Member

    If I think better I don’t need the logo to resize.

    February 15, 2016 at 4:18 pm #85484
    Pratik
    Participant

    Hi @riccron123,

    There are two ways to achieve what you want, both a bit different. I will provide you css for both:
    1. Following code will resize the image with respect to screen. Will not maintain the aspect ratio:

    
    #header-content {
        background: rgba(0, 0, 0, 0) url("http://www.fabricfoto.it/wp-content/uploads/2016/02/testata_1600x230.png") repeat scroll 0 0 / 100% 100%;
    }
    

    2. Following code will show full image and maintain the aspect ratio but will show gaps when the image cannot cover (because it will maintain the aspect ratio):

    
    #header-content {
        background-image: url("http://www.fabricfoto.it/wp-content/uploads/2016/02/testata_1600x230.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    

    Let me know which one works out for you.

    Regards,
    Pratik

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 26 total)
1 2 →
  • The topic ‘Logo centered over the header image’ is closed to new replies.

Incompatible Archive Error in WordPress 6.4.3

How to fix the Incompatible Archive Error?

Support Forum Instructions

Use the search box below to search for your answer and also check out theme instructions at Theme Instructions before posting question here.

When you post in your question, please don't forget to post in your site URL. If you have issue in posting question here in forum then check out screencast from our YouTube channel.

Notice: Support Forum Now Requires User Moderation to Avoid Spammers

Search Forums

Popular Themes

BizBoost Pro

Buy Now

Bold Photography Pro

Buy Now

Audioman Pro

Buy Now

Catch Fullscreen Pro

Buy Now

Fotografie Pro

Buy Now

Catch Responsive Pro

Buy Now
Hire a Customizer

Recent Topics

  • iPhone Hamburger Menu and Word Menu
  • Header height
  • Thumbnail Size – Events and Category List
  • Thumbnail Size – Events and Category List
  • Hide page title in the middle of header
  • Very urgent problem with slide module
  • Cath Responsivre pro
  • Bying the latest version of Catch Evolution Pro
  • Text issue
  • Primary menu appearance
  • How to edit theme with elementor
  • Event Calendar Integration
  • FSE Pro Install error
  • my-music-band.3.7.9 pro not pro version
  • activation fse-pro limited
  • Homepage image not shown completely
  • PHP update
  • Catch Gallery: Tiled mosaic galleries are not sizing properly
  • Error on FSE PRO
  • Invalid License Key
  • Theme not showing Main Sidebar in Widgets section
  • unable to update from 2.0.2 to 2.1
  • Featured Image
  • URGENT: issues after FSE update!!!
  • Restore deleted navigation
  • unofficial homepage/header media link
  • Double Widgets
  • every page like the front page. Possible?
  • Full Frame Pro technical problem E_COMPILE_ERROR
  • Add Theme Options to any page

Popular Tags

background blog catch box catch everest category child theme Color comments css Excerpt featured content featured image featured slider font footer header header image homepage Home Page image images layout logo menu mobile navigation padding page portfolio post posts responsive search sidebar Simple Catch site title slider theme title update widget widgets width woocommerce wordpress

Featured Posts

  • Best Free WordPress Block Themes for Full Site Editing for 2024
  • 40+ Best Free Business WordPress Themes for 2024
  • 30+ Best Free WordPress Themes for 2024
  • 25+ Best Free Music WordPress Themes for 2024
  • Our Top 10+ Free and Premium Photography WordPress Themes Collection 2024
  • Our Free and Premium Music WordPress Themes Collection

Donate Now

Click on the Donate button below to Support Free Themes, Free Plugins, and Free Support. All donations are used for the development and improvement of free themes, plugins, and support. Thanks for your contribution.
  • Home
  • About Us
  • Contact Us
  • Join Our Team
  • Terms & Conditions
  • Privacy Policy
  • Facebook
  • Twitter
  • Linkedin
  • Scroll Up
  • Pinterest
  • Youtube
  • Instagram
© 2012 - 2025 Catch Themes: Premium WordPress Themes. All rights reserved.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie settingsGot it!
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT