CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tanvir Rahman
Tanvir Rahman

Reputation: 709

How can set logo to left-corner and menu to right-corner in a single row?

I wanted to set my menu like below image.I rearranged my codes in many ways to solve this problem.But every time i failed.The right section of this menu is creating a gap in right area.Please help me to solve this problem.

LIKE_THIS HTML CODE:

<div class="col-xs-12 bigMenu">
    <div class="col-xs-2 logo">
      <a href="#"><img src="images/logo2.png" alt="Brainwave"/></a>
    </div>
    <ul class="col-xs-10 list-unstyled list-inline">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>

CSS CODE:

    .header-area .bigMenu {
        background: transparent;
    }
    .header-area .bigMenu:after {
        content: "";
        clear: both;
        display: block;
    }
    .header-area .bigMenu .logo {
        float: left;
    }
    .header-area .bigMenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        float: right;
    }
    .header-area .bigMenu ul li {
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        padding: 0 1rem;
    }
    .header-area .bigMenu ul li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        padding: 0px 20px;
        font-size: 1.2rem;
        letter-spacing: 0.2rem;
    }

Upvotes: 0

Views: 1378

Answers (1)

AleshaOleg
AleshaOleg

Reputation: 2201

Just add this style sheets to your CSS:

.col-xs-10 {
    display: block;
    float: right;
}

Here is demo.

.header-area .bigMenu {
    background: transparent;
}

.header-area .bigMenu:after {
    content: "";
    clear: both;
    display: block;
}

.header-area .bigMenu .logo {
    float: left;
}

.header-area .bigMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.header-area .bigMenu ul li {
    display: block;
    float: right;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0 1rem;
}

.header-area .bigMenu ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 0px 20px;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
}

.col-xs-10 {
    width: auto;
    float: right;
}
<div class="col-xs-12 bigMenu">
    <div class="col-xs-2 logo">
      <a href="#"><img src="images/logo2.png" alt="Brainwave"/></a>
    </div>
    <ul class="col-xs-10 list-unstyled list-inline">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">About</a></li>
    </ul>
</div>

Upvotes: 2

Related Questions