Hi, @ambern
As far as I can see, that element doesn’t have any padding rules on it. Instead, it has:
- .left-menu – 38% width
- .middle-site-logo – 24% width
- .right-menu – 38% width
So, you’d have to reduce the middle one’s width and increase the menu’s.
Try adding this in Dashboard – Appereance – Customize – Additional CSS in the Customizer
Here’s some code tested in such way that on smaller screens it doesn’t overlap the logo:
#site-header.center-header #site-navigation-wrap .left-menu, #site-header.center-header #site-navigation-wrap .right-menu {
width: 40.5%;
}
#site-header.center-header #site-navigation-wrap .middle-site-logo{
width:19%;
}
You can change those percents as you wish. Just make sure they sum up to 100%
You can learn how to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.
Hope this helps,
Kind regards!
@vladytimy this worked well, thank you.
Happy to help! Glad it works!