[catwingz]

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

[Skandha]

@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

[Skandha]

@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

[catwingz]

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

[catwingz]

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

[Skandha]

@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

[catwingz]

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!

[Skandha]

@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

[catwingz]

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!

[catwingz]

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

[Skandha]

@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

[catwingz]

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

[Author]

Posts