2

Using the code from this SO Answer, I am trying to combine example 6 and 8 where I have a LOGO (Example 6) AND a Title/Brand (Example 8), which are always visible even in mobile screen (similar to example 8).

I have made minor changes, but I am not sure how to combine them.

Modified Bootply containing only example 6 and 8: Bootply

<nav class="navbar navbar-inverse navbar-static-top example6">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand text-hide" href="">Brand Text
        </a>
    </div>
    <div id="navbar6" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
          <li><a href="#">Welcome {Name}</a></li>
          <li class="active"><a href="#">Logout</a></li>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container-fluid -->
</nav>

<nav class="navbar navbar-inverse navbar-static-top example-8">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar8">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand text-hide" href="">Brand Text
        </a>
    </div>
    <div id="navbar8" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
          <li><a href="#">Welcome {Name}</a></li>
          <li class="active"><a href="#">Logout</a></li>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container-fluid -->
</nav>
j08691
  • 204,283
  • 31
  • 260
  • 272
Dev
  • 149
  • 1
  • 1
  • 11

1 Answers1

3

I think I understand what you're asking. You could use the class navbar-text and include it in navbar-header. Here's a Fiddle. It still displays the text in mobile. 

<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" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span></a>
      <p class="navbar-text">brand text here yadda yadda</p>
    </div>

EDIT: Then you need to configure the CSS like this: 

.navbar-text {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
    padding-top: 10px;
}

Here's an updated Fiddle. You can adjust the height of the .navbar-text using padding or line-height.

hcgriggs
  • 170
  • 1
  • 2
  • 11
  • Thanks for the response. I would like the brand text to be centered. [JSFiddle](https://jsfiddle.net/qy78d1oL/) Also, the toggle isn't working. – Dev Mar 08 '16 at 16:48
  • I believe I've found the solution. I've updated my previous answer with CSS and a Fiddle. Does that help? – hcgriggs Mar 08 '16 at 17:09
  • Almost! When I change the text to h3, it breaks. Also, is it possible to center it unless it is mobile, in which case it becomes h4 (or stays h3) but aligns next to the logo? [JSFiddle v2](https://jsfiddle.net/h298Lb8f/2/) – Dev Mar 08 '16 at 17:20
  • It's breaking because you wrapped your `

    ` tags in `

    ` tags. If you replace `

    brand text here yadda yadda

    ` with `

    brand text yadda yadda

    ` it will no longer break. [fixed fiddle](https://jsfiddle.net/hcgriggs/h298Lb8f/4/)     – hcgriggs Mar 08 '16 at 17:27
  • if you want it to only center on large screens, you need to use media queries. I found [this guide](http://blog.templatemonster.com/2014/10/24/bootstrap-3-grid-system-guide/) useful when I was learning how to use them. This essentially means that you need to put the .navbar-text css in a `@media` selector, like this: `@media only screen and (max-width : 1200px){ .navbar-text { position: absolute; width: 100%; left: 0; text-align: center; margin: auto; padding-top: 10px; } }` – hcgriggs Mar 08 '16 at 17:35
  • When it is viewed on small devices, it adds small space under the button. When I change the font inside the css, it has a reverse affect for me. Also, Is there any other way to vertically align it so I don't have to change line-height/padding each time text size changes? [Updated Fiddle](https://jsfiddle.net/h298Lb8f/12/) – Dev Mar 08 '16 at 18:01
  • You'll have to play around with it depending on how you want it to look. One way to go is have different settings for mobile using media queries, and then using a regular css selector (i.e., .navbar-text) to make the padding/height equal across all screen sizes. – hcgriggs Mar 08 '16 at 18:03