By thirdearthdesign on

I have created a bootstrap sub-theme for a new site that I am building, on the whole things are going ok but I am having a few issues with the image responsiveness.

Under Appearance>>Theme Settings>>General>>Images... I have "Responsive Images" enabled, and generally across my site images do resize and respond as expected, however this does not apply to my logo image on the navbar, it remains the same size regardless of window size or the device it is viewed on, meaning my navbar is almost unusable on smaller screens.

The code for the logo is as follows:

<header id="navbar" role="banner" class="<?php print $navbar_classes; ?>">
  <div class="<?php print $container_class; ?>">
    <div class="navbar-header">
      <?php if ($logo): ?>
        <a class="logo navbar-btn pull-left" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
          <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
        </a>
      <?php endif; ?>

Which when compiled looks like this:

    <header id="navbar" role="banner" class="navbar navbar-fixed-top navbar-default">
  <div class="container">
    <div class="navbar-header">
              <a class="logo navbar-btn pull-left" href="/" title="Home">
          <img src="http://sitename/sites/all/themes/bootstrap_subtheme/logo.png" alt="Home" />

I've added the img-responsive class to the code (as below), but this has no effect:

<header id="navbar" role="banner" class="<?php print $navbar_classes; ?>">
  <div class="<?php print $container_class; ?>">
    <div class="navbar-header">
      <?php if ($logo): ?>
        <a class="logo navbar-btn pull-left" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
          <img src="<?php print $logo; ?>" class="img-responsive" alt="<?php print t('Home'); ?>" />
        </a>
      <?php endif; ?>

The responsiveness appears to be effected by the pull-left class on line 5, if I remove this class the logo becomes responsive as expected, but removing pull-left has a adverse effect on the layout of the navbar items.

Any clues as to what I can do to resolve? Bootstrap being as popular as it is, I'm hoping someone has found an elegant solution to what must be a common issue?

Thanks

⋅ Categories: Drupal 7.x

Comments

thirdearthdesign’s picture

thirdearthdesign commented

I may have answered my own question.

I've replaced <a class="logo navbar-btn pull-left" with <a class="logo navbar-btn navbar-left"

Image responsiveness of my logo is now working and the navbar behaves as I want it to.

This is the result of trawling through the Bootstrap CSS documentation where it says the following about quick floats (pull-left / pull-right) :

Not for use in navbars: To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

And the navbar docs reveals:

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate ul with the respective utility class applied.

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

Seems to work for me so I'm happy.

rick_p’s picture

rick_p commented

Yes, this worked for me too. For those with less experience I'll add a few details. If you're using a sub-theme for bootstrap, which you should be if you want to fix this, you want to copy the page.tpl.php file from the bootstrap/template/system folder into your sub theme's templates folder and make the minor adjustment as thirdearthdesign described above. Don't forget to clear your caches before you test if it's working. You will want to add the following line to your custom CSS file as well. Be sure to inspect element to make sure your classes are the same as mine, if not, adjust the CSS code accordingly.

.logo img {
height: auto;
max-width: 90%; /* this could be 100% but for me it goes outside the header background at tablet */
}

Best, Rick

nor sairi’s picture

nor sairi commented

tq.. it work for me