[sliska]

Hi there,
I’m using Catch Responsive and I have a few requests for CSS codes! The website is http://www.huronresearch.ca/hbow/.

-The Catch Responsive theme is making my logo larger than the actual image. I would like to use CSS to select a custom image height and width or to force the theme to use the true height and width of the image.

-The logo image begins slightly to the right of where the menu and slider begin. I would like to align the logo image flush left or flush right with the menu/slider. In other words, I would like to remove the white space before the logo image. (There is no white space before the text in the image itself, and “Check to move title and tag before logo” is UNchecked.)

You’ll notice that there are a bunch of attempts of css to do these things that didn’t work in the site source code… Those are there to help me keep track of what’s not working. Sorry 🙂

Thanks so much!

[sliska]

Oops, sorry–I wrote Header in the title of this topic, but I am working with a LOGO, not a header image. (The logo appears above the menu, whereas if I enable a header image, it appears below the menu.)

If I cannot complete these requests with a logo, but I CAN complete them with a header, please let me know that too!

[Skandha]

@sliska: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width:991px) {
	.custom-logo {
		width:50%;
		height:50%;
		position:relative;
		left:-50px;
	}
}

Let me know if this solves your issue.

Regards,
Skandha

[sliska]

Thank you so much, Skandha! That really helped. Can I trouble you again?

If you will go to my site now (http://www.huronresearch.ca/hbow/), you will see that there is white space to the right of the logo. past where the underline ends. (There is no white space past where the underline ends in the image.) I would like to make it so that the purple underline extends all the way to the edge of the menu/slider. Can you please help me?

I tried making the image itself larger in photoshop, but that didn’t work, nor did increasing the .custom-logo width to above 120%. I also tried reducing the page width with a code I found elsewhere to see if I could make them line up, but it didn’t change the width at all. This was the code (I changed the % several times with no visible results):

.no-sidebar #primary { width: 80%; }

Thanks so much for your time!

[sliska]

Alternatively, I see that if I add my image as a header image, I can easily make it the width of the sidebar by using the “Page/Post Featured Header Size” drop-down menu and selecting “slider.” This option is not available for logos.

Would it be easier to provide CSS that would cause my header image to appear above the nav menu rather than below it?

Thank you!

[Author]

Posts