CODEWITHSUNDEEP
htmlcsswebnavbar
Strawberry
Strawberry

Reputation: 41

side navbar when position is "Fixed"

I have a side nav bar and I have set the float to be right and then when I put the position: fixed; it floated to left why did this happen? can anyone help me?

this is my html:

<div id="navbar">
 <ul>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-pagelines fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-smile-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-envelope-o fa-2x"></i></a></li>
<li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-home fa-2x"></i></a></li>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-plus-square fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-bell-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-cog fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-clock-o fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-power-off fa-2x"></i></a></li>
</ul>
</div>

And this is my css:

#navbar{
position:fixed;


}
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height:auto;
    width: 70px;
  background: rgba(255, 255, 255, 0.1);
    float:right;
}


li a {
    display: block;
    color: #ffffff;
    padding: 22.2px 10px;
    text-decoration: none;
     -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}

li a:hover,li a:focus {
    background-color:#28a828;
    color: green;

}

Thank you :)

Upvotes: 2

Views: 161

Answers (2)

leusrox
leusrox

Reputation: 2375

This happened because the element with position: fixed doesn't stretch over the entire width in contrast to the element with position: relative.

So you can set:

#navbar {
 width: 100%;
 position:fixed;
}

And they will work fine: JSFiddle

Another way, you can remove float: right in ul, and set for #navbar top/right.

This will work too: JSFiddle

Upvotes: 2

zvava
zvava

Reputation: 101

You need to make a div tag with the ID of 'content' or something like this: <div id="content">.

Then in CSS give it a left-margin or 80px or something around that size. (I recommend using EMs instead since they scale with the web browser and work on any platform)

Your final Code should look something like this:

Index.html

<div id="navbar">
 <ul>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-pagelines fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-smile-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-envelope-o fa-2x"></i></a></li>
<li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-home fa-2x"></i></a></li>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-plus-square fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-bell-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-cog fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-clock-o fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-power-off fa-2x"></i></a></li>
</ul>
</div>

<div id="content">
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
</div>

stylesheet.css

#navbar{
    position:fixed;
}

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height:auto;
    width: 70px;
  background: rgba(255, 255, 255, 0.1);
    float:right;
}


li a {
    display: block;
    color: #ffffff;
    padding: 22.2px 10px;
    text-decoration: none;
     -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}

li a:hover,li a:focus {
    background-color:#28a828;
    color: green;
}

#content {
  margin-left: 80px;
}

You can view a demo of this working here: JSfiddle DEMO.

Upvotes: 0

Related Questions