Hi @px2
sure! Try to use this CSS code:
@media all and (max-width: 1025px) {
header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
padding-top: 10px;
}
}
This will insert a 10px padding top on mobile and tablet
Thread Starter
px2
(@px2)
Hi, thanks for the quick reply, the mobile and tablet menu still have 90px padding unfortunately, I think this bit of extra CSS I added to make the top menu have 90px is also being used on the mobile/tablet menu, I added your code below it:
header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
color: #18278C;
padding-top: 90px;
}
@media all and (max-width: 1025px) {
header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
padding-top: 10px;
}
Hi @px2
try adding an “!important” to the code I gave you earlier, like this:
@media all and (max-width: 1025px) {
header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
padding-top: 10px !important;
}
}
Thread Starter
px2
(@px2)
Thank you, I added your code, I also changed the existing header code to read this:
@media all and (min-width: 1025px) {
header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
color: #18278C;
padding-top: 90px;
}
And it works now! The code I had already added was counteracting the new snippet, but all looks good now.
Thanks for the help.
