HTML menu positioning

Question

I was designing a responsive menu and I have four elements which are to go on the left side and one on the right one. Now, the thing is I don't know how to position the right one so that it is responsive and as I resize the window it stays still (like in https://teamtreehouse.com).

The html is the following:

<nav id="menu">
  <nav id="menucenter">
    <ul>
      <li><a href="index.html">Quién soy?</a></li>
      <li><a href="index.html">Creatividad</a></li>
      <li><a href="secondarypages/schedule.html">Acción</a></li>
      <li><a href="secondarypages/places.html">Servicio</a></li>
      <li><a href="secondarypages/places.html">Servicio</a></li> <- element I want on the right side
    </ul>
  </nav>
</nav>

The css is:

#menu {
    padding: 5px;
    background-color: rgb(50,50,50);
}

#menucenter {
    padding: 10px;
    padding-bottom: 0px;
    position: relative;
}
#menucenter ul {
    list-style-type: none;
    margin:0px;
    padding: 5px;
    overflow: scroll;
    background-color: rgb(50,50,50);
}

#menucenter li {
    float: left;
    padding-bottom:6px;

}
#menucenter li.highlight{
    top:42px;
    border-bottom:solid 3px #5CF1B3;
    border-radius: 2px;
    position: absolute;
}

#menucenter li a {
    display: inline;
    color: white;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    background-color: rgb(50,50,50);
    border-bottom:solid 1px #00b3b3;
}

Thank you in advance!

Create a plunker/jsfiddle, will be helpful for others. – Nehal Jun 21 '17 at 01:40 — Nehal, Jun 21 '17 at 01:40

nejc.m · Answer 1 · 2017-06-21T08:01:26.227

0

Just add

position: absolute;
top: 15px;
right: 15px;

to the last one. Adjust top and right to your needs. Here is an example: https://jsfiddle.net/8r74y2vz/. Hope that answers you Q.

edited Jun 21 '17 at 08:01

answered Jun 20 '17 at 23:57

nejc.m

300
2
8

I already tried. The problem is that when you resize the window the element stays fixed if you use float:right. I want it to stay still like in https://teamtreehouse.com right upper corner. – Diego Bernal Jun 21 '17 at 07:33
Thank you anyway ;) – Diego Bernal Jun 21 '17 at 07:33

score 0 · Answer 2 · answered Aug 08 '18 at 11:48

So you have multiple solutions for this.

My preference is flexbox (one of similar Q. answered with flexbox: How to Right-align flex item?) Flexbox browser support: https://caniuse.com/#feat=flexbox

But if you need to support older browsers then you can use float:right; but remember to clear floats.

HTML menu positioning

2 Answers2