CSS misaligned menu items

Question

CSS misaligned menu items

Navigation

#1 by (1 votes)

0

I'm developing a web application and I've developed a menu with some icons but by decreasing the width of the page the icons are out of focus and this is my menu

Butbydecreasingthewidthofthepagethishappenswiththemenucomponents.

<divclass="header-fixed">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 text-left">
            <a class="fa fa-home"></a>
        </div>
        <div class="col-xs-12 col-sm-4 text-center">
            <a class="fa fa-user"></a>
        </div>
        <div class="col-xs-12 col-sm-4 text-right">
             <a class="fa fa-shopping-cart"></a>
        </div>
    </div>
    </div>
  </div> 

      .header-fixed {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  display: none;
    background-color: #6495ED;
  border-bottom: 1px solid #000;
  height: 37px;
  font-size: 20pt;
  }

html html5 css css3 bootstrap-3

asked by anonymous 15.10.2017 / 03:53

1 answer

How to search from SearchView in the actionbar data from RecycleView using Kotlin? How do I grab each JSON object, add it to a list and show it in activity?

score 1 · Accepted Answer

As I already explained in:

The sum of cols has to be always equal to 12, however its cols-xs are:

col-xs-12 + col-xs-12 + col-xs-12 (12 + 12 + 12) = 36 ( wrong )
col-sm-4 + col-sm-4 + col-sm-4 (4 + 4 + 4) = 12 ( correct )

The right thing should be:

col-xs-4 + col-xs-4 + col-xs-4 (4 + 4 + 4) = 12

Example:

<div class="header-fixed">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-sm-4 text-left">
                <a class="fa fa-home"></a>
            </div>
            <div class="col-xs-4 col-sm-4 text-center">
                <a class="fa fa-user"></a>
            </div>
            <div class="col-xs-4 col-sm-4 text-right">
                 <a class="fa fa-shopping-cart"></a>
            </div>
        </div>
    </div>
</div>

Although you do not even need sm , since xs is identical, then change to:

<div class="header-fixed">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 text-left">
                <a class="fa fa-home"></a>
            </div>
            <div class="col-xs-4 text-center">
                <a class="fa fa-user"></a>
            </div>
            <div class="col-xs-4 text-right">
                 <a class="fa fa-shopping-cart"></a>
            </div>
        </div>
    </div>
</div>