CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 165

Making text appear next to icon

I want my "Navigation"text to appear just next to the icon, but I can't seem to be able to do it. 

<nav class="nav-mobile">
                    <div class="navbar">
                      <div class="navbar-inner">
                        <div class="container-fluid">
                          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <div class="icon"><span class="icon-bar">&nbsp;
                              </span><span class="icon-bar">&nbsp;
                              </span><span class="icon-bar">&nbsp;
                              </span></div> <h3> Navigation</h3></a>

                          <div class="nav-collapse collapse" aria-expanded="false" style="height: 0px;">

                          </div></div></div></div>
                    </nav>

css

.icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #6c6d71;
}


nav .btn-navbar
{
    display: block;
    padding: 10px 15px;
    border-top: solid 1px #d7d7d7;
    border-bottom: solid 1px #d7d7d7;
}

https://jsfiddle.net/fLhrgw63/1/

Upvotes: 2

Views: 113

Answers (2)

John Bupit
John Bupit

Reputation: 10618

.icon and h3 are block elements. Making them inline-block should work:

CSS:

.icon {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}
.nav-title {
  display: inline-block;
}

HTML

<h3 class="nav-title">Navigation</h3>


.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #6c6d71;
}
nav .btn-navbar {
  display: block;
  padding: 10px 15px;
  border-top: solid 1px #d7d7d7;
  border-bottom: solid 1px #d7d7d7;
}
.icon {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}
.nav-title {
  display: inline-block;
}
<nav class="nav-mobile">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <div class="icon"><span class="icon-bar">&nbsp;
                              </span><span class="icon-bar">&nbsp;
                              </span><span class="icon-bar">&nbsp;
                              </span>
          </div>
          <h3 class="nav-title"> Navigation</h3>
        </a>

        <div class="nav-collapse collapse" aria-expanded="false" style="height: 0px;">

        </div>
      </div>
    </div>
  </div>
</nav>

Upvotes: 2

kthornbloom
kthornbloom

Reputation: 3720

Both H3 and the .icon div are block elements which will be 100% width by default. You need to change them to inline-block so that they are only as wide as the content within them.

.icon, h3 {
  display:inline-block;
  vertical-align:middle;
}

https://jsfiddle.net/fLhrgw63/3/

Upvotes: 3

Related Questions