Tagged: catch inspire, logo size
- This topic has 11 replies, 2 voices, and was last updated 4 years, 9 months ago by catwingz.
-
AuthorPosts
-
February 20, 2019 at 10:35 pm #166280catwingzParticipant
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
February 20, 2019 at 11:06 pm #166293SkandhaParticipant@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,
SkandhaFebruary 21, 2019 at 1:49 am #166326SkandhaParticipant@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,
SkandhaFebruary 21, 2019 at 2:32 pm #166381catwingzParticipantHi 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
February 21, 2019 at 7:34 pm #166389catwingzParticipantHi,
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
February 22, 2019 at 12:31 am #166405SkandhaParticipant@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,
SkandhaFebruary 22, 2019 at 2:04 am #166422catwingzParticipantHi 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!
February 22, 2019 at 2:27 am #166423SkandhaParticipant@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,
SkandhaFebruary 22, 2019 at 1:28 pm #166460catwingzParticipantHi 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!
February 22, 2019 at 2:10 pm #166463catwingzParticipantOops. 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;
}
}February 25, 2019 at 1:32 am #166613SkandhaParticipant@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,
SkandhaFebruary 25, 2019 at 4:00 pm #166684catwingzParticipantHi 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
-
AuthorPosts
- The topic ‘Center and enlarge logo’ is closed to new replies.