Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #166280
    catwingz
    Participant

    I am trying out Catch Inspire, in part because the demo shows the logo in a centered position. Instead I am finding that it’s stuck on the left and with no way to reposition it. I am also finding that there is no way to adjust the size of the logo. What is the CSS for these things?

    The site I am working on is hidden by a ‘coming soon’ page.

    Thank you

    #166293
    Skandha
    Keymaster

    @catwingz: I will need to have a look at your site to fix the issue you are having. Since your site is not live you can provide me you WP admin credentials so that I can look into the issue. I will contact you shortly by email..

    Kind Regards,
    Skandha

    #166326
    Skandha
    Keymaster

    @catwingz: Hello there,
    To center the logo
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    @media screen and (min-width:1120px) {
    	.custom-logo-link {
    		position:absolute;
    		transform:translateX(-50%);
    		left:50%;
    	}	
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #166381
    catwingz
    Participant

    Hi Skandha,

    This solved the centering issue, but I would still like to be able to make the logo larger. I tried enlarging the max-width but this didn’t make a difference. Making the top margin smaller will probably be called for to compensate. How can I fix this?

    Thank you

    #166389
    catwingz
    Participant

    Hi,

    The other thing I would like to do is to remove or replace the search field. We don’t foresee a need for search, but if a phone number were there it would make a lot more sense. Is this doable?

    Thank you

    #166405
    Skandha
    Keymaster

    @catwingz: Hello there,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    /* To make the logo larger */
    @media screen and (min-width:480px) {
    	.custom-logo {
    		max-width:360px;
    	}
    }
    /* To remove Search Field  */
    #search-container {
    	display:none;
    }
    #header-content {
    	padding:30px;
    }

    The Header Top Option to add phone number on Header is only available in pro version of the theme. I suggest you to upgrade to pro. You can check out the additional-features available in pro version of the theme.

    Let me know if this helps you out!
    Kind Regards,
    Skandha

    #166422
    catwingz
    Participant

    Hi Skandha,

    The logo is much better. However, now the navigation bar is riding on top of it. I don’t see anything in the CSS about the positioning of the navigation. What’s my next step?

    Thank you!

    #166423
    Skandha
    Keymaster

    @catwingz: You seem to have added

    #header-content {
    	padding-bottom:10px;
    }

    instead of

    #header-content {
    	padding:30px;
    }

    that is why the logo and navigation bar are too close to each other.

    Let me know if this fixes your issue!
    Kind Regards,
    Skandha

    #166460
    catwingz
    Participant

    Hi Skandha,

    It looks like I was on the right track but didn’t tae it far enough. To get the logo where I wanted it for desktop it needed to be

    #header-content {
            padding-bottom:100px;
    }
    

    That said, now I have created a problem for myself as this leaves too much space for tablets and phones. I tried this (and with different browsers) but it doesn’t seem to make a difference:

    /* mobile logo */
    @media screen and (max-width: 360px) {
      #branding img {
        padding-bottom:10px;
      }
    }

    What am I missing?

    Thank you!

    #166463
    catwingz
    Participant

    Oops. This is what I get for borrowing code from another site. I am still trying to solve the new mobile issue, but including the last addition this is the full roster of changes so far:
    `/* To make the logo larger */

    @media
    screen and (min-width:480px) {
    .custom-logo {
    max-width:360px;
    }
    }
    /* To remove Search Field */
    #search-container {
    display:none;
    }
    #header-content {
    padding-bottom:100px;
    }
    /* mobile logo */

    @media
    screen and (max-width: 360px) {
    #header-content {
    padding:10px;
    }
    }

    #166613
    Skandha
    Keymaster

    @catwingz: Hello there,
    You seem to have removed the logo from your site. Can you reinsert the logo so that I can help you out?

    Kind Regards,
    Skandha

    #166684
    catwingz
    Participant

    Hi Skandha,

    My apologies— over the weekend she decided to reinstate the text title and relocate the logo to the banner where it can be as large as she wants it to be. Stay tuned for the next thread…

    Thank you

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Center and enlarge logo’ is closed to new replies.