Format logo in menu bar

Activello
1

I’ve already inserted the logo in the menu, my question is, how do I make it look crisper? It seems blurred for some reason. Is there any CSS to make it clearer or is there an ideal size/format the image should be in?

Also, how do I increase the padding on it’s right? All the menu items have a 10px padding on both sides but It doesn’t seem to apply to the logo for some reason.

Please help!

My site: http://www.lipstickalchemist.com/

2

Hi @lipstickalchemist,

Thank you for your questions.

I’ve already inserted the logo in the menu, my question is, how do I make it look crisper? It seems blurred for some reason. Is there any CSS to make it clearer or is there an ideal size/format the image should be in?

To make it clearer you have to increase its width by using following custom CSS code.

body #page .navbar-default .navbar-nav>li:first-child a {
    height: 45px;
    width: 240px;
}
Also, how do I increase the padding on it’s right? All the menu items have a 10px padding on both sides but It doesn’t seem to apply to the logo for some reason.

Use below CSS code to achieve it.

body #page .navbar-default .navbar-nav>li:first-child {
    margin-right: 30px;
}

Best Regards,
Movin

3

Thank you!

240px makes the logo much too large, should I use one of a smaller file size? Could you tell me the ideal dimension and format (jpg/png) to use so that the logo is the same size as it is now but crisp and clear.

4

Hey there,

The size of the logo on the demo is 207x28.
Your logo maybe a little taller, but you can use this to gage the size of your logo.
and resize accordingly.

I hope this helps.

Best Regards,
Support.