2

I have a sub theme based off Bootstrap and my current nav bar look like this

enter image description here

My goal is to move the menu (Home ... contact) to appear underneath the slogan when the page is larger than 768px as it is the breakpoint when it turns into a burger button and appears on the right. I was trying to play around with the css and the page.tpl.php, but no results there. This is the first time I've used Bootstrap with Drupal.

0

You can add a breakpoint in your LESS/CSS (ideally you're using LESS or SASS with bootstrap, but anyway) and I'd probably make the slogan absolute position and use the top property as suggested by @Darvanen like this:

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) {
        div.slogan {
            position: absolute;
            top: 0;
        }
        div#main-menu {
            margin-top: 30px; // Depends on the size of the slogan div
        }
    }

You might need to experiment with the positioning of the menu div, like make it position: relative;.

For more see the excellent bootstrap docs: http://getbootstrap.com/css/#grid-media-queries

0

To move things around like that you will either need to use the CSS top property within your CSS or SASS file(s), or move it around with Javascript.

0

I successfully modified page.tpl.php file and completely replaced the header section with -

<div class="container">

  <div class="masthead">
    <h3 class="text-muted">
      <a class="logo" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
        <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
      </a>
    </h3>
  </div>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="navbar-collapse collapse">
        <nav role="navigation">
              <?php if (!empty($primary_nav)): ?>
                <?php print render($primary_nav); ?>
              <?php endif; ?>
              <?php if (!empty($secondary_nav)): ?>
                <?php print render($secondary_nav); ?>
              <?php endif; ?>
        </nav>
      </div>
    </div>
  </nav>
</div>

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.