OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Menu toggle icon in top navbar is not floating left

  • Thread starter Thread starter Eng Khalid Abdi
  • Start date Start date
E

Eng Khalid Abdi

Guest
I have a Menu toggle icon in top Navbar which is refusing to float left.


Code:
header {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  z-index: 100;
  height: 60px;
  box-shadow: 0px 5px 5px -5px rgb(0 0 0 /10%);
  background-color: #2980b9;
  transition: left 300ms;
}

.header-content {
  display: flex;
  align-items: center;
  height: 100%;
  /* justify-content: space-between; */
}

.dropdown {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: right;
  padding: 4px;
  margin: 0px 15px;
  width: 100%;
  border: 1px solid #5499c7;
}

.dropdown a,
label {
  color: #fff;
  position: relative;
  Padding: 2px 4px;
  background: #5499c7;
}

.dropdown a {
  font-size: 1.6rem;
  margin-left: 1.4rem;
  border-radius: 50%;
}

.dropdown label {
  font-size: 1.6rem;
  text-align: left;
  margin: 0rem;
  cursor: pointer;
  float: left;
}

Code:
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<header>
  <div class="header-content">
    <div class="dropdown">
      <label for="menu-toggle">
                <span class="las la-bars"></span>
            </label>

      <a href="#">
        <span class="las la-home"></span>
      </a>

      <a href="#">
        <span class="las la-envelope"></span>
      </a>

      <a href="#">
        <span class="las la-bell"></span>
      </a>

      <a href="#">
        <span class="las la-user"></span>
      </a>

    </div>
  </div>
</header>

As you can see the picture below: (marked red arrow line)

Top navbar

I want all Navbar items float right except toggle-menu icon bar which is span Anyone can help i appreciate.

I tried floating left, but it refuses
<p>I have a Menu toggle icon in top Navbar which is refusing to float left.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>header {
position: fixed;
right: 0;
top: 0;
left: 0;
z-index: 100;
height: 60px;
box-shadow: 0px 5px 5px -5px rgb(0 0 0 /10%);
background-color: #2980b9;
transition: left 300ms;
}

.header-content {
display: flex;
align-items: center;
height: 100%;
/* justify-content: space-between; */
}

.dropdown {
display: flex;
position: relative;
align-items: center;
justify-content: right;
padding: 4px;
margin: 0px 15px;
width: 100%;
border: 1px solid #5499c7;
}

.dropdown a,
label {
color: #fff;
position: relative;
Padding: 2px 4px;
background: #5499c7;
}

.dropdown a {
font-size: 1.6rem;
margin-left: 1.4rem;
border-radius: 50%;
}

.dropdown label {
font-size: 1.6rem;
text-align: left;
margin: 0rem;
cursor: pointer;
float: left;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://maxst.icons8.com/vue-static...e/line-awesome/1.3.0/css/line-awesome.min.css">
<header>
<div class="header-content">
<div class="dropdown">
<label for="menu-toggle">
<span class="las la-bars"></span>
</label>

<a href="#">
<span class="las la-home"></span>
</a>

<a href="#">
<span class="las la-envelope"></span>
</a>

<a href="#">
<span class="las la-bell"></span>
</a>

<a href="#">
<span class="las la-user"></span>
</a>

</div>
</div>
</header></code></pre>
</div>
</div>
</p>
<p>As you can see the picture below: (marked red arrow line)</p>
<p><a href="https://i.sstatic.net/4Z2f1TLj.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/4Z2f1TLj.jpg" alt="Top navbar" /></a></p>
<p>I want all Navbar items float right except toggle-menu icon bar which is <code>span</code> Anyone can help i appreciate.</p>
<p>I tried floating left, but it refuses</p>
Continue reading...
 

Latest posts

Top