Just getting started and learning XD on my own. Decided to try Web Export. I would really appreciate some help.
Fixed elements are not staying fixed. Like the navigation - am I doing something wrong or is this not supported?
When I select the option to style via classes my design gets totally messed up. Not sure whats happening.
I keep trying to set my navigation to 100% wide, but I can’t seem to override this value . I have a path called base. I went to element options and changed it to 100% and centered horizontally. It’s still showing as 1366 wide. Also the entire nav is a symbol and I made that symbol 100% and centered as well.
:
<svg viewBox="0 0 1366 129.444" class="Base">
<path id="Base" d="M 0 0 L 1366 0 L 1366 129.4444580078125 L 0 129.4444580078125 L 0 0 Z">
</path>
I don’t think this value is exposed through the API, I’m checking, but you might be able to set this manually by setting the style value to “position:fixed”
…or adding the navigation as the last element at the root level (not inside any groups). I can create an example for this.
Hmm… what version are you using? That feature is experimental but I’d be interested in seeing an example of this. You can post an example or send me an example privately. Does it look OK when you uncheck this option? The next version has an upgrade with this specific feature.
Web Export does not protect you from setting options that would conflict with each other. This may one of those cases. Do you want it 100% or do you want to center it?
For example, in this case, you can set the width of an element to 100% and that will make that object fill the width of the browser. You can then set that object to centered and it will try to center it at 100% width which would place it in the exact same position.
So if you ever wanted to center an object and get the x position you’d take the object width and divide by 2 and you’d subtract that from the available width divided by 2.
In other words if your browser is 1000 pixels wide and your object was 10 pixels wide you could find the center position with the following:
horizontal center position = (available width / 2) - (object width / 2);
// solve for x
x = 1000/2 - 10/2
x = 500 - 5
x = 495
Now if the object is 100% width and available width is 1000 pixels than means the object would be sized to 1000 pixels.
// solve for element of 1000 pixels (100%)
x = 1000/2 - 1000/2
x = 500 - 500
x = 0
I want the box behind the nav at 100%. I tried without centering. Same problem. The navigation is not inside any groups but made up of several elements and made into a symbol. I can send you a sample of that too.
Thank you for sending a sample in direct messages. There are some upgrades in the newer versions that will help with some of the issues.
There are two issues in the project. One is the desire to stretch the artboard to fill all the browser space and the other is to center the artboard. If you set both the browser gets confused. I’ll look at ways to address this or warn about it in the future.
I’ve started a series of examples here. I plan to add some simplified examples that will address some of the things you’d like to do in your project.
