Hi,
What is the Custom CSS I can use to fit my company logo full width into the Header?
I read the how to in your header style section but it was unclear how to create a code since i’m not an “advance user”
Hi,
If you want to display a full size logo, then you will need to use one of the header styles that allows it:
https://forum.tagdiv.com/header-styles/ headers 9, 10 and 11
Thank you!
Hi Bogdan,
Thanks. I did read the docs and my site is already utilizing Header style 10, however it has now a text logo. I would like to replace the text with a .png masthead size logo, but can’t seem to get it to “stretch” to the full width size. I’ll change the logo so the when you visit the site you’ll be able to see what i’m talking about.
Hi,
I think you misunderstood how the full logo headers work. This is your logo:
http://soapoperanation.com/wp-content/uploads/2016/04/SON-Web-Logo.png
The logo will NOT stretch. It will display the full size of the logo but it will not stretch/enlarge it.
It will display it full size meaning it will not be shrunk to fit the containers. If you want a big logo, you will have to create it in an image editor. Stretching an image beyond it’s natural size is a bad idea as it will lose a lot of it’s quality. Here’s an example so you can see what I mean: http://screencast.com/t/pS3CPA7BcHT
Thank you!
Alright, I think I understand what you’re saying. What if I get the logo designer to extend the lines of the logo to the left and to the right, would that work as it won’t be distorting the image?
If that is a viable solution what dimension is the banner so that I can tell the logo designer to to size it correctly?
tsk
The header styles that display the full logo will display the image exactly as you create it. The theme will not re-size it in any way, so any type of customization that you want to make to the image must be made to the image itself by the designer. It is your choice how you plan on modifying the image. Extending the lines will make the logo wider but the height will remain the same.
Thanks.
Hi, I followed the above and my full-width logo works (style 9). BUT – I would still like to have the Full-block-hover over menu items (not just an underline), how is this possible?
Thank you.
Hi,
You can replicate the full hover background with a bit of css:
.td-header-style-9 .sf-menu > li > a:after{
height: 48px!important;
z-index:-1!important;
}
The trick is, you have to place it directly in the style.css file. If you add it in the theme panel then you would be able to see it change from the bottom line to the full background at first load as the css wil get rewritten.
Add the code at the bottom of the style.css file like so: http://screencast.com/t/sgzjQllqrVi
Thank you.
