[mohossain]

Hi everyone,

I am trying to add a logo to

relative

to the menu and/or the header. So for example, if you look at my site, I want the red “CB” letters to the left of the menu. I should be able to position it as I want it but I need to know what CSS code I can use to make it relative to the menu.

This is what I have at the header now, but I know it’s not anything relevant really.
<div style="float: center;"><img src="http://cinderellabridalandflowers.com/wp-content/uploads/2013/06/temp_logo150.gif"></div>

My website: http://cinderellabridalandflowers.com

Thanks a lot!
Mo

[Sakin]

@mohossain: I don’t know what you are trying to do as you have added logo outside the header.

[mohossain]

Hi Sakin!

Sorry, I didn’t explain it clearly. I don’t want it to be outside of the header. I just added it there so you can see what I’m trying to use.

I would like it to be in header/menu area. I want the “CB” to be towards the middle of the menu “floating” over it.

Does that make more sense? Otherwise I’ll take a screenshot of what I want and show you.

Thank you!!

[mohossain]

Ok, so now I moved it into the header area. But I don’t want the extra white space on top (where the logo is placed) and I’d like to move the logo down so it overlaps or sits on top of the menu area.

[mohossain]

@sakinshrestha: Thanks again. I have been playing around with the site to make this work. I’ve gotten it how I would like it positioned, but I don’t want the extra whitespace on top that is generated by the logo/header. Any ideas?

[mohossain]

@sakinshrestha: Another update.

So I got it perfect as I want it, using the child theme and some css:

#cinderella_logo { height: 0px; padding: 0; z-index: 50;
    position: relative; left: 35px; top: -10px; 
}

Only one problem left: the logo gets cut off at the top of the page.

I’ve tried to do many things to try to make it peak out, without any success. Would you be able to help please?

[Sakin]

@mohossain: I check in your site and the logo looks fine. It’s not getting cut off.

[mohossain]

@sakinshrestha: I moved it down so it wouldn’t be cut off. I’d still like to have it higher, if possible. I moved it up again, now it’s cut off. Take a look please. Thanks!

[Sakin]

@mohossain: You can add the following CSS.
.site { overflow: visible; }

[mohossain]

@sakinshrestha: Perfect!! Worked flawlessly.
I was trying to make overflow visible for other frames. Wasn’t thinking of the main one (site). -__-
Thanks a lot again Sakin!

[Author]

Posts