How to get logo to cover header area

please see image below. I would like the logo to cover the full area indicated by the blue arrows. How to do this and override the padding of the other elements?

Comments

  • please see image below. I would like the logo to cover the full area indicated by the blue arrows. How to do this and override the padding of the other elements?
  • Hi, @pandora

    Please share the URL of your site, so I can able to inspect HTML elements to share you the exact custom CSS for the same.
  • www.wordsxpictures.com
  • Hi, @pandora

    Directly increase the size of the logo image via CSS not comes under the standard way to follow. It may distort other section layouts. To enable to upload logo size of maximum dimensions, you need to add custom code. Please follow the below steps:

    1) Install the Code Snippets plugin.
    2) Add New code snippets and paste the code from the link: https://pastebin.com/75qt0XG2

    In the code, you can see the parameters for width and height. You can change the values up to your needs.

    Let me know did it work!

    Thanks
  • Hey I have tried that previously but it didn't work. Please check my site at www.wordsxpictures.com and let me know how to override the cell padding with specific advice. Thanks
  • edited July 2018
    Hi, @pandora

    Copy to paste the below CSS into your WordPress Additional CSS box:

    /*LOGO DIMENTION*/
    .custom-logo{
    height:90px;
    width:500px;
    }
    /*LOGO DIMENTION*/

    /*LOGO*/
    .navbar-brand {
    padding: 0px 0px;
    margin-right: 40px;
    }
    /*LOGO*/

    Let me know did it work!

    Thanks
  • Hi Imraz,
    Thank you! I made some adjustments and vertically it works, but horizontally not yet. See images attached. How do I get it to go as far as the arrows in my image?
    Screen Shot 2018-07-21 at 12.28.19 AM.png
    1904 x 1164 - 2M
  • Please see arrows- that's how I want the logo to fit
    Screen Shot 2.jpg
    1904 x 1164 - 731K

  • The only possible we can modify here would be like as in the screenshot. More than this will distort your layout. To increase the width of the logo, please increase the value of 500px in above-given custom CSS.

    Let me know the results!
  • This is what it looks like with the logo at 500px.  So I have 2 issues: 
    1. What I need is that the white margin between the logo and the red highlight over 'home'. Note the CSS additions eliminating the spaces around it. How to do that?
    2. Why is the logo showing as low res? In photoshop at 500px at 100% it shows perfectly. See images attached.
    Screen Shot 2018-07-26 at 8.26.09 PM.png
    2438 x 1114 - 2M
  • see css
    Screen Shot 2018-07-26 at 8.26.32 PM.png
    514 x 1068 - 155K
  • See logo at 200%
    Screen Shot 2018-07-26 at 8.33.45 PM.png
    1462 x 776 - 103K
  • Hi, @pandora

    Because it happens due to image cropped while uploading. I already told at very first about it. So now please follow the steps before uploading any image.

    1) Install the Code Snippets plugin.
    2) Add New code snippets and paste the code from the link: https://pastebin.com/75qt0XG2

    then after, try to upload an image of the size of height: 49px and width: 500 px

    You can even share us your wp-admin details with your Logo Image on my email address(er.imrajkhan@gmail.com) to add this change from our side.

    Thanks
Sign In or Register to comment.