@kadbar: The padding that you circled is automatically added by the theme’s JavaScript and the value is dynamically created based on the size of your header image.
You will need to use some custom CSS in order to override it:
@media screen and (min-width: 1230px) {
body.hero-image .hero.without-featured-image {
padding-top: 15px !important;
padding-bottom: 15px;
}
}
The use of !important is not considered best practise and should only be used when you need to override inline styling, such as the value for padding-top that’s added by the theme.
As an extra note: Please do not edit your theme’s files directly. Any changes you make there will be lost when it comes time to update.
To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)
Let me know how you get on with that or if you have any extra questions.
Thread Starter
kadbar
(@kadbar)
Thanks a lot of. I have done what I wanted to, my only problem now is that box-like borders appeared in dropdown menus, when I added this to Custom CSS:
.main-navigation ul {
margin-left: -36px;
width: 780px;
}
Thread Starter
kadbar
(@kadbar)
I’ve managed to solve the problem by adding this in Custom CSS:
.menu-primary .sub-menu.toggle-on {
width: 246px;
}
I’m glad that you got your site looking as you’d like it to.
The use of negative values for margin or padding isn’t considered good practise and can sometime cause layout issues on older browsers or mobile.
If you can clarify what you were hoping to achieve with the above snippet, maybe I can help with a different approach.
.png){kind=link}
.png){kind=link}