Adjusting css to fit cart icon and header image

Hi!

Try the following, and after you have made the updates, let me know and we’ll take a look to fine-tune it if we need to.

We are going to put your logo image somewhere else so it can be responsive, and so that the entire image can be used as a link. We will allow only 5% width for both your mobile menu and the shopping cart icon so that your logo has as much room as possible without having anything lay on top of it. The cart and mobile menu aren’t actually *in* those 5% width DIVs, but the effect will be the same. And, we will remove some styling we don’t need.

Remove the background-* lines for the #masthead ID styling in your my_style.css stylesheet (lines 87-90).

In the styling you put inside the home page, replace both the /* CUSTOM LAYOUT */ and /* CUSTOM COLORS */ (up until /* PRIMARY COLOR */) sections with this:

/* CUSTOM LAYOUT */
#logo {
    background-size: contain;
    background-image: url(https://tomscarcarecenter.com/wp-content/uploads/2014/08/logostrip2.jpg);
    background-repeat: no-repeat;
    background-position: 50%;
    position: relative;
}

#logo a {
	/* style the logo anchor as an absolute positioned child block */
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: 0;
	float: left;
}

.logo-center #masthead #logo {
    width: 90%;
}

.logo-center #masthead .left-links, .logo-center #masthead .right-links {
    width: 5%;
}

		/* header size */

ul.header-nav li a {
    font-size: 80%;
}

	/* CUSTOM COLORS */
#top-bar {
    background-color:#627f9a;
}

Once you get this working like you want it, you might want to consider putting this all in your stylesheet so that it can be used on other pages! ??

HI Mizagorn! This worked good – thanks so much for helping me out! I only see one thing that is a problem – when you shrink down, you see a copy of the header image in the background. Also, you said I could give the image a link, is it possible to give that image 3 links? Each of those logos ideally would open their respective pages. I didn’t think this was possible, so I didn’t pursue it.

thanks again!
Kristi

Got it! I figured out why that extra logo was showing, it was in ‘appearance’ in my theme. Deleted that and it works perfect! thanks so much for your help, Mizagorn – you are awesome!

Kristi

Ah, the header image behind the header image, so to speak, was not present with the CSS adjustments I made above. I noticed that too, and tried to compensate, but then I didn’t actually replicate your site so it didn’t work out quite right it seems. :/

Sorry about that, but congrats on figuring it out! Nice work.

You can explore image mapping, or actually spit your header image into three parts with three separate divs, but that would have to be another support topic. It helps others find what they are looking for when the support title matches the content. ??

I totally understand, Mizagorn, about the image mapping. I do it all the time, but never in wordpress. I will start another topic for that. Thanks again for all the help, very much appreciated!
Kristi

Hey Mizagorn, I think you can still help me in this post – if you will ??

I just updated my image to be an image map. I inserted it on this page:
https://tomscarcarecenter.com/imagemap/

Now, is there a way to switch out the image in your css above, that works so well, to this image mapped version of that same image? It has a short code when I insert it into the page, but not sure if I can somehow include this in the css code above. Short code is: [imagemap id=”2191″]

Your thoughts? If you still think I should create a new post for this, I will, just thought I would ask since it relates to the css code you originally supplied. Thanks!
Kristi

Good work on the image map! But since it is using fixed width settings, it will pretty much take us back to exactly what your problem was before with the shopping cart overlaying your logo.

Remove the inline styling on line 80 of your page for max-width: 150px. This was making your anchor area only 150px wide, and should have been removed from instructions earlier.

Add the following lines to your my_style.css sheet, starting around line 96:

/* style the logo anchors as absolute positioned child blocks */
#logo a.tccc {
    position: absolute;
    width: 33%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0;
}
#logo a.tcsc {
    position: absolute;
    width: 33%;
    height: 100%;
    top: 0;
    left: 33%;
    border: 0;
}
#logo a.twwcw {
    position: absolute;
    width: 33%;
    height: 100%;
    top: 0;
    left: 66%;
    border: 0;
}

On your page where there is the <div id="logo">, replace all the content *within* that div with this (you will be replacing the one anchor link that was for the whole logo with three anchors, one for each business):

<a class="tccc" href="https://tomscarcarecenter.com/toms-car-care/" title=" - " rel="home"></a>
<a class="tcsc" href="https://tomscarcarecenter.com/coffee-spot/" title=" - " rel="home"></a>
<a class="twwcw" href="https://tomscarcarecenter.com/water-works-car-wash/" title=" - " rel="home"></a>

Hey there! I am finally getting back to this job. The only thing i don’t know how to find, is the page where there is the <div id=’logo”>. It isn’t on any of the pages I created, it in the theme template somewhere. Would firebug show me what page this is on?

thanks,
Kristi

Yes, Firebug will tell you. It looks like it is the default page template. Look for the classes assigned to the <body> tag.

If you put the link for your header logo in the theme options area, then you will probably have to modify the php file that generates that default page template.