Tweaking location of zoomControl (cartodb.js)

Question

I have succeeded in creating a header outside of the CartoDB UI, but the header is blocking the zoom controls, as can be seen below.

Is there any way to modify the zoom control location to adapt to the existence of this header?

Answer 1

You can simply use CSS on .leaflet-top class to adjust the top positioning of all Leaflet controls:

.leaflet-top {
  top: 100px;
}

Demo: http://jsfiddle.net/ve2huzxw/196/

Answer 2

Set zoomControl to false when you init the map, then add it to a different corner:

// initiate leaflet map
var map = L.map('map', {
    center: [0,0],
    zoom: 2,
    zoomControl: false
})
// add zoomControl
L.control.zoom({ position: 'topright' }).addTo(map);