[Solved] Moving Content To The Right…

[Historical Forums User]

This is the problem, I’m on Squarespace. I don’t have access to the site.css file. All I can do is add CSS into a “custom css” box.

Is there code I can add to the custom css box that will override what’s it the site.css file?

[shaneisme]

A hah… hmm… strange that squarespace has such odd code…

Do you think you could share what you have in your custom css box currently?

P.S. – you can use codepen or pastebin rather than pasting everything in the forum.

[Historical Forums User]

Here is my custom css:
http://pastebin.com/5a7RcwaM

[shaneisme]

Try this:

Replace:

.sqs-layout {
 margin-top: -3em;
}

With this:

.sqs-layout {
 height:0;
}

Since it seems like that element isn’t being used in your layout for anything, rather than giving it a negative top margin to pull up the social icons we’re basically making it go away in a hacky way.

This will bring the social icons right up under the other links and underneath #topNav. Or at least it should unless there’s something else going on.

#topNav has a bottom margin of 20px, so if you want more space, you can add this to your custom css:

#topNav {
  margin-bottom: 50px;
}

… and adjust as necessary (you can use 2em or whatever).

[Historical Forums User]

Thanks again…

So, I added:
#topNav {
margin-bottom: -21px;
}

to bring the social icons closer to the last sidebar link. If I go any smaller (i.e. -50, which is where I would like it to be) then that makes it so the last link doesn’t work again. Is there any way I could get it to -50 and still keep the last link?

Thanks!

[shaneisme]

If you do that, you’re faced with the exact same problem as before.

The element .sqs-layout has a z-index higher than #topNav and will overlap it given the chance (such as a negative margin).

Re-read my instructions above, they don’t involve any negative margins. If they don’t work, let me know.

[Historical Forums User]

I added:
.sqs-layout {
height:0;
}

and that got the links working. In your instructions you said it should also bring the social icons up under the last link, but it actually made them farther away. That is why I added:
#topNav {
margin-bottom: NNpx;
}

and just played with NN until it brought the social icons up but didn’t effect the last link.

How can I move the social icons up without using the negative margin?

Thanks!

[shaneisme]

OK – try this (maybe, there are some weird things going on)…

Delete the .sqs-layout bit, and replace it with this:

#headerBlocks {
  display: none;
}

It’s strange that #footerBlocks-2 is as tall as it is, but I think this may solve it?

[Historical Forums User]

Ok, that brought it up to about the same place I was getting with the “-21” for topnav.

There is still a gap I’d like to close… is there any way to do that or does this have to do with the #footerBlocks-2 height that you mentioned?

Thanks!

[shaneisme]

Just give #topNav a margin-bottom:0; and that should solve it.

[Historical Forums User]

That did it… Thanks for all your help!

[shaneisme]

My pleasure :)

[Author]

Posts