Photo Gallery Forums

Hi

I'm currently playing around with the slidemenu and have two questions:

#1
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?

#2
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?

Thanks,
Thomas

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:

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).

Thanks, Karl. I adjusted both settings accordingly.

Another question regarding the slidemenu: I'd like to fix the height of the slidemenu at a defined position so that it matches with my logo. 

Is this the code to do that? .sb-toggle-fixed { transform:translateY(35px) !important; }

Thanks,
Thomas

Yes, looks correct.

Of course, "matching" depends on how you see it. The menu button is already set to align to the middle of the logo. In your case, since you have a tall vertical logo, it might be better to customize it.