Hello,
I created a very basic black text logo in Illustrator in PNG format in the recommended dimensions (240x94px and 480x188px) for Header Style 7. However, on the homepage (collabhype.com) the logo looks very fuzzy and unclear. What should I do to ensure my logo is displayed clearly/sharply while maintaining the proper sizing?
Also, when using the recommended dimension, the menu bar seems to have too much spacing in height. Is there a way to make the menu height more compact so there’s not so much white space? For example, can I make the logo smaller and more centered with menu items to the right, similar to hypebeast.com? Another example is when I scroll down the homepage, the menu bar shrinks. How can I a more similar sizing with a slightly larger logo?
Thanks
Hello,
Upon inspecting your logo, i cannot see it fuzzy or unclear. It is very clear: https://www.screencast.com/t/5WPVWOELzll
The vertical space comes from the image itself: https://www.screencast.com/t/c2ssAssuhA
Remove the extra space above and below the text from your image.
In order to have the menu items closer to the logo, you will have to use a different header style: https://forum.tagdiv.com/header-styles/
Thank you!
Hi,
I made a comparison of the original image used and the logo image when set
– https://www.screencast.com/t/uvH5phCR
They would be the same quality as far as I can tell. As long as the full image size is used when uploaded the image will be displayed as it is.
So you would like to do something like this maybe
– https://www.screencast.com/t/GxNQPhj9A5w
This is the code I used in the example, you could experiment with it
.td-header-style-7 .td-header-sp-logo img {
max-height: 94px;
}
.td-header-style-7 .sf-menu,
.header-search-wrap {
margin-top: 12px;
float: left;
}
.td-header-style-7 .td-header-menu-wrap-full {
height: 94px!important;
}
.td-header-style-7 .header-search-wrap #td-header-search-button .td-icon-search {
line-height: 107px;
}
Also you could experiment with different header styles and make modifications to theme if needed
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks
Hi,
1) For some reason when I view my homepage in Chrome or Firefox on my Macbook Pro 13″ retina display or my Windows Surface Pro, the logo appears not that sharp. https://www.screencast.com/t/oo0HbzYyrZMy
If you compare it to the http://www.hypebeast.com website logo, which I’m using the same font, their logo appears more sharp. Do you have any suggestions?
2) Regarding the vertical space height of the logo, I am using the recommended pixel dimensions when creating my logo. So I create a page in Illustrator of the recommended pixel size, then add my text logo within that page. If you are recommending that should reduce some of the space above and below the text, then I am resizing the page, which does not follow your recommended sizing, right? Is there any reason why I should keep the recommended sizing?
3) I do like your example of the horizontal alignment of the logo with the menu items. Also, shifting the menu items to the left closer to the logo. Where would I need to update the code?
Thanks
Hi,
1. That website seems to use a svg logo, this one to be more exact
– https://d5c0iea6jarb7.cloudfront.net/images/hypebeast2018/hypebeast-logo.svg?w7h421lv
From what I can find online there are differences between image quality when using svg as logo. Some topics I found here
– https://www.externaldesign.com/using-svg-graphics-in-wordpress/
– https://elfsight.com/blog/2017/05/svg-png-jpeg-choose-the-image-format-for-your-website/
– https://bjornjohansen.no/svg-in-wordpress
2. There is no unnecessary vertical space added, the header will be the height of the logo plus some padding
– https://www.screencast.com/t/Rs7neHZpg
So the height of the header will be the height of the logo and some padding. Changing the line height of the main menu may affect the total height of the header
– https://www.screencast.com/t/2MxDUFDm67
3. If you want to use that code be sure to enter it in the Theme panel advanced CSS desktop section, modification made to headers may not look best across all devices, so multiple codes would have to be made by viewport, or a more optimized version then that example if possible.
It is best and also recommended to try and use header styles as they are.
Thanks
