tbp wrote:I would like to move the slidemenu a bit to the left, probably about 10px just to have a bit more space on the right.
How can I achieve this with custom CSS? Is .sb-toggle>button, .sb-toggle>button:hover { right:+10px; } the way to go?
Keep in mind, styles like this in X3 are "responsive", meaning they are designed to be different across screen sizes. For example, on small mobile screens, because the interface needs to be compact, the toggle button is aligned to right set of the screen (no margin), while on larger screens, it's set to 10px. If you override these values without using media queries, you are also overriding the responsive design, which might not be the desired effect.
To increase the margin on larger screens, you can use this:
@media only screen and (min-width: 641px){
.sb-toggle {
right: 20px;
}
}
tbp wrote:I adjusted the font size for the slidemenu a bit. This works perfectly fine for Chrome and Firefox, but not for IE11.
The code I used is: .sb-toggle>button:before { font-size:1.5em; }
Does IE11 need special code to work?
You should perhaps set it directly on the button element instead. After all, sizes defined in
em are relative. Don't know about IE11, but possibly something with pseudo:before elements. As long as it's not broken in IE11, then I wouldn't bother too much? ... IE11 has <2% usage globally (mostly 3rd world countries), is last Explorer ever, and is being replaced by MS Edge. Even MS recommends not using it (because of security issues).
.sb-toggle > button {
font-size: 1.2em;
}