Remove padding around Site Identity Logo and Search Box by Search Icon

This topic has 5 replies, 2 voices, and was last updated 4 years, 2 months ago by Skandha.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
August 18, 2020 at 2:55 pm #256366

gbargsley
Participant

Can someone help me figure out these two things.

1.) Reduce the padding around the Site Identity Logo I am using. I don’t want so much white space around it at the top.
2.) Put the Search box in the black bar next to the Search icon

garrybargsley.com

Thanks

August 19, 2020 at 1:38 am #256391
Skandha
Participant
@gbargsley: Hello there,
1. To reduce padding above the logo
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
#site-branding {
    padding: 0 !important;
}
```
2. Can you let me know which Search box you are referring to?

Let me know if this works out!
Kind Regards,
Skandha
August 19, 2020 at 11:30 am #256435

gbargsley
Participant

Thanks. I added the CSS code and it still has a little padding around the image, but it did shrink it.

I cannot seem to figure out how to upload an image. But if you go to garrybargsley.com you will see the Search box and the magnifier icon don’t align.

August 20, 2020 at 6:39 am #256527
Skandha
Participant
@gbargsley: Hello there,
To reduce padding above the logo
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
#masthead {
    padding-top: 0;
}
```
When you click on the search icon the Search box displays below the icon. What would you like to change?

Let me know if the padding issue is fixed.
Kind Regards,
Skandha
August 20, 2020 at 10:38 am #256558

gbargsley
Participant

Thanks for the help.

Can you look at my site and see what I am talking about. I did see that clicking the magnifying glass dropped down a search bar which is cool.

However, there is a search box above that that is always there and I found in the theme that I can set the words in that box. But since the magnifying glass has its own box I would like to make that one go away.

Also, the padding around my header is better at the top, but extra white space around the side and bottom of the image.

Any ideas on that?

August 22, 2020 at 9:16 am #256721
Skandha
Participant
@gbargsley: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
.sidebar.sidebar-header-right.widget-area {
    display: none;
}
#masthead {
    padding-bottom: 0;
}
```
Let me know if this works out!

Also you seem to be using Site logo as the image. You might as well you Header Image option instead of the Site logo for the image.
Kind Regards,
Skandha
Author

Posts