Padding In Sp-header...
Mindsugar
Heyyyy,
as you can see in screenshot 1 the mainmenu and the logo are positioned very left- and rightside without proper space.
Screen 1:
I want a padding on the left and right side of 50px. When i open my DevTools, select the sp-header element and change the values to the following everything works fine and the elements are shown with a padding:
sp-header {
background-color: #FFFFFF;
color: #FFFFFF;
padding: 5px 50px 5px 50px; // used to be 5px 5px 5px 5px;}
I now copy the selector, put it in my custom css-code and add an !important to it (without it doesnt work either):
Unfortunately it doesnt show any effect. What am I doing wrong?
Thanks for your help.
Ras
Pavel
Accepted AnswerHi Mindsugar.
A couple more things you do not know about.
sp-megamenu-parent has a negative margin from the box.
To reset, use the following code.
.sp-megamenu-parent {
margin: 0;
}Last menu item has no padding right from the box.
To reset, use the following code.
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
padding: 0 15px !important;
}The dropdown menu of the last menu item is outside the browser window.
To solve, you can use the megamenu option to configure the dropdown position individually
Mindsugar
Accepted AnswerHey again.
Now it seems to work. But unfortunately not for the safari browser?!
Paul Frankowski
Accepted AnswerHi,
all browsers should use that same CSS rules, maybe just clean browser cache.
Safari has also incognito mode, use it to preview site.
On all my browsers I see padding (left & right) - so it's nothing to worry.
Paul Frankowski
Accepted AnswerThanks, indeed those extra steps may help as well on smaller resolution.
In Dropdown position - I suggest to using "Left" for Kontakt.