1

I think this is immaterial, but just for the record: I'm building a Joomla 3.4.3 website with my own Bootstrap 3 template.

The header image banner.svg on my website should be in the center. So what I did was: give the image this CSS:

header img {
   margin: 10px auto 0 auto;
}

But, whatever I do, the image will stay on the left, unless I give it a fixed margin:

header img {
    margin: 10px 90px 0 90px;
}

but I don't want to do that for obivious reasons: scaling for responsiveness.

The header image 'shrinks' on scroll (jQuery), but I don't see any connection there.

1

You first need to set the wrapper container to 100% with:

.navbar-header {
    width: 100%;
}

Then, for the image, you need to make it a block element and set the margins correctly, like so:

header.large img {
    height: auto;
    margin: 10px auto;
    max-width: 100%;
    width: 900px;
    display: block
}
  • Some people are so much better in intricate CSS matters. I vaguely remembered something along the lines of a containing element, but.... So thanks a lot, Lodder. I have one question though: as you can see the changes, when you scroll down the image becomes smaller (onscroll jQuery effect), but the containing element .navbar-header blocks the menu items from positioning alongside of the logo. Could you give a hint of a solution here? – Thomsterdam Sep 3 '15 at 14:54
  • Try assigning width: auto; to the .navbar-header class on scroll. I'm not sure as to where this scroll function is coming from so can't give an exact answer, but I tried adding this value in Firebug and it displayed the menu in your desired position – Lodder Sep 3 '15 at 15:04
  • I guess I know too little of JavaScript/jQuery to do that, so I'll ask about this on a jQuery forum. Thanx a million, Lodder! – Thomsterdam Sep 3 '15 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.